The React documentation says that React and web components are complementary to each other. We're going to wrap a React component into a custom element, sending some props as HTML attributes and listen to the click event.
I'll assume you know about React and you only want to know how to use custom elements.
Define a custom element
To define a web component we should associate a custom tag with a class that wraps the component behavior.
We're going to test some React features like children, a prop, and a date constant to test if the component is recreated.
Defining a class for the element
We should create a ShadowRoot for our React component to encapsulate the JavaScript and CSS for this component from the global CSS, this isn't required but it's recommended.
Also, it's good to separate the constructor from the render of the element itself.
classMyElementextendsHTMLElement{shadow;constructor(){// Always call super first in constructorsuper();this.shadow=this.attachShadow({mode:'open'});// Write element functionality in herethis.renderElement();}renderElement(){constonClick=this.getAttribute('onclick')consttext=this.hasAttribute('text')?this.getAttribute('text'):undefined;ReactDOM.render(<Apptext={text}onClick={onClick}><slot/></App>,
this.shadow);}// ...}
In the renderElement method we take values from the attributes of the HTML tag, like onclick and text, but what is that wild <slot /> there?
The slot element is a placeholder inside a web component where you can fill your own markup. Sounds similar to dangerouslySetInnerHTML. 🙈
💡 You can use several slots in the web component using the name attribute.
🧠 If you check the React component's code, the slot is placed using the children prop.
The custom element lifecycle
Like the React components, we can define specific methods inside the custom element class to handle the lifecycle, similar to the old fashion class component in React. We're going to see the most important two.
Unmount a custom element
We can use disconnectedCallback to known when our component is disconnected from the document's DOM.
Receiving new props form outside
We should re-render 🙀 our React component if we receive new values for our custom element. We have the attributeChangedCallback to let us know when some value changes.
First, we should define an array of observable attributes for our component, and then we can re-render the custom element.
classMyElementextendsHTMLElement{staticgetobservedAttributes(){return['text','onclick'];}attributeChangedCallback(name,oldValue,newValue){console.log(`The attribute ${name} was updated.`);this.renderElement();}// ...}
Ok, this looks really easy. 🤔 We take the attribute values each time the renderElement is called, so we just need to call it, and the ReactDOM.render() API is going to re-render our component and calculate the diffs. 🍰
Conclusion
Now we can create a modern and light website using just HTML and JavaScript, but plugging in complex UI stuff made with React using the Custom Element interface, or third party React packages if we need one. We are using the best of both worlds. 🎸
How to wrap a react component into a web component
howto-connect-react-custom-element
The React documentation says that React and web components are complementary to each other. We're going to wrap a React component into a custom element, sending some props as HTML attributes and listen to the click event.
I'll assume you know about React and you only want to know how to use custom elements.
Define a custom element
To define a web component we should associate a custom tag with a class that wraps the component behavior.