Typing JSX Children to Allow Only HTML Elements

Every rendered JSX expression - a native tag, a fragment, or a custom component - resolves to the same JSX.Element type at the type level, erasing the distinction the developer is trying to enforce

TypeScript only supports this constraint starting from React 19, since children typing was rewritten to distinguish element sources

The constraint is possible using a discriminated union on the children prop, but most developers are unaware of the correct syntax

JSX.Element only describes native HTML elements by default, so custom components would already fail type-checking without any extra constraint