web component lite for react: isolate css & dom (shadow dom enhancement)

README.md

I'm building a React widget where I don't control the environment. I want to make sure that no css bleeds into my widget. Instead of delviering my component as a web component I though of the underlying shadow dom standard to render react directly into a shadow dom (together with any styles emitted from styled components).

Works pretty good. Idea is from https://www.wpeform.io/blog/render-react-app-shadow-dom-styled-components/ which I found while searching for some prior art of this approach.

app.tsx

// Instead of rendering directly into your root element
const root = createRoot(element); 
root.render(<App config={config}/>);

// You can render into a shadow element DOM
const root = createRootWithShadowDom(element);
root.render(<App config={config}/>);

create-root-shadow-dom.tsx

import { createRoot } from 'react-dom/client';
import { StyleSheetManager } from 'styled-components';
import React from 'react';

/**
 * Render a given React app plus the styled component styles inside a shadow dom
 * to prevent any styles bleeding into our component.
 * 
 * Idea from https://www.wpeform.io/blog/render-react-app-shadow-dom-styled-components/
 * Thank you ✨
 * 
 * I wrapped the approach in a convenient function to easily render any root wrapped by a shadow dom.
 */

export const createRootWithShadowDom = (element) => {
  const shadow = element.attachShadow({ mode: 'open' });

  const styleSlot = document.createElement('section');
  const renderIn = document.createElement('div');

  shadow.appendChild(styleSlot);
  styleSlot.appendChild(renderIn);

  const root = createRoot(shadow);

  return {
    render: (children) => {
      root.render(
        <StyleSheetManager target={styleSlot}>
          {children}
        </StyleSheetManager>
      )
    }
  }
}