React 19 finally brought native Web Component support to the finish line, achieving a perfect score on Custom Elements Everywhere. However, after rewriting AgnosticUI with a unified Lit core, I discovered that "support" and "Developer Experience" are two very different things.
While you can use standard Custom Elements in React 19 now, I’m still opting for @lit/react for these three reasons:
- The Event Mapping Tax: React's synthetic event system still feels clunky when listening to standard DOM events. @lit/react handles this mapping automatically.
- Prop vs. Attribute DX: Passing complex data (objects/arrays) as properties rather than stringified attributes is still more ergonomic through a wrapper.
- TypeScript Definitions: Getting high-quality Typings for a raw Custom Element inside JSX is still a manual chore that @lit/react automates.
Furthermore, moving to a "Source-First" architecture makes components more AI-readable, allowing LLMs to refactor code without the "black box" hallucinations common with traditional node_modules packages.
I recently published a full post-mortem on this migration over at Frontend Masters, where I dive into the other challenges like Shadow DOM accessibility, Form Participation, and styling with ::parts.
Read the full deep-dive here:
https://frontendmasters.com/blog/post-mortem-rewriting-agnosticui-with-lit-web-components/
Top comments (0)