React v19 was just released with support for Web Components!
React 19 adds full support for custom elements and passes all tests on Custom Elements Everywhere.
In past versions, using Custom Elements in React has been difficult because React treated unrecognized props as attributes rather than properties. In React 19, we’ve added support for properties that works on the client and during SSR with the following strategy:
- Server Side Rendering: props passed to a custom element will render as attributes if their type is a primitive value like
string
,number
, or the value istrue
. Props with non-primitive types likeobject
,symbol
,function
, or valuefalse
will be omitted.- Client Side Rendering: props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes.
Thanks to Joey Arhar for driving the design and implementation of Custom Element support in React.
This is a very welcome step in the right direction. We’ve long had to create and manage React wrappers for our clients’ Web Component-based design systems. Great stuff!