Quick Peek: React App Mounted on a Shadow DOM Root

Code first

import React, { FC } from "react";
import { render } from "react-dom";

const App = () => <div>React + Shadow DOM</div>;

const root = document.querySelector("#react-root");
root.attachShadow({ mode: "open" });

render(<App />, root.shadowRoot);

Play around in playground

What's this all about?

The code above is very similar to the way we usually mount React apps to the DOM. But there's one significant difference: we're creating a shadow DOM and mounting to its root a React app. Learn more about shadow DOM.

Use-cases

• Isolate styles: an app will not be affected by any outer CSS that brings a good solution when you need styles isolation
• WEB components: React apps can be mounted inside WEB components

Cons

• Styles need to be stored in the shadow root
• You might have issues with external libraries that access DOM elements inside an app through JS
• Some payment processors don't support shadow DOM in the official clients

In the end

This definitely is not something that should be used on a daily basis but it's a good option when you need to implement behavior mentioned in use-cases.

I tried to make this post really short so feel free to ask any questions in the comments.

Thanks for reading!

P.S.

I started doing Twitter recently so I would be glad if you check the things I post there! Also, advise who in your opinion I need to follow from the tech!
Twitter