This content originally appeared on Brad Frost and was authored by Brad Frost
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 valuefalsewill 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!
This content originally appeared on Brad Frost and was authored by Brad Frost
Brad Frost | Sciencx (2024-12-05T20:27:31+00:00) React v19 – React. Retrieved from https://www.scien.cx/2024/12/05/react-v19-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.