Improve constructable stylesheet adoption into shadow roots

src/AnotherComponent.jsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { useShadowStyles } from "./ShadowRoot";
 import * as styles from './AnotherComponent.css' assert { type: 'css' };
 
-// Adopt all sheets into the document
-document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles.default];
-
 export const AnotherComponent = () => {
+
+    useShadowStyles(styles.default);
+
     return <div className={styles.another}>
         Another Component
     </div>;

src/App.jsx

@@ -1,30 +1,25 @@
 import React from "react";
-import root from 'react-shadow';
 
+import { ShadowRoot } from './ShadowRoot';
 import { Component } from './Component';
 import { AnotherComponent } from './AnotherComponent';
 
 export const App = () => {
 
-    const ref = React.useRef();
-
-    React.useEffect(() => {
-        console.log(ref.current.shadowRoot.adoptedStyleSheets[0]);
-    }, []);
-
     const [anotherLoaded, setAnotherLoaded] = React.useState(false);
 
     const onBtnClick = () => {
         setAnotherLoaded(true);
     }
 
-    // See "propTypes": https://www.npmjs.com/package/react-shadow
-    // Adopt the document's adoptedStyleSheets into the shadow root.
-    return <root.div 
-        ref={ref}
-        styleSheets={document.adoptedStyleSheets}>
+    return <>
+        <ShadowRoot>
             <Component />
             {!anotherLoaded && <button onClick={onBtnClick}>Load Another Component</button>}
             {anotherLoaded && <AnotherComponent />}
-    </root.div>;
+        </ShadowRoot>
+        <ShadowRoot>
+            <Component />
+        </ShadowRoot>
+    </>
 };

src/Component.jsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { useShadowStyles } from "./ShadowRoot";
 import * as styles from './Component.css' assert { type: 'css' };
 
-// Adopt all sheets into the document
-document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles.default];
-
 export const Component = () => {
+
+    useShadowStyles(styles.default);
+
     return <div className={styles.test}>
         Hello World
     </div>;

src/ShadowRoot.jsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import root from "react-shadow";
+
+// A React context for adding Constructable stylesheets to appropriate shadow roots
+export const ShadowContext = React.createContext(null);
+
+export const useShadowContext = () => {
+    return React.useContext(ShadowContext);
+};
+
+// Helper hook for adding sheets to context
+export const useShadowStyles = (styles) => {
+    const context = useShadowContext();
+    React.useEffect(() => {
+        context.addSheet(styles);
+        return () => context.removeSheet(styles);
+    }, []);
+};
+
+// Component for providing and managing context
+export const ShadowRoot = (props) => {
+
+    // Use React state to force re-render when stylesheets change
+    const [ stylesheets, setStylesheets ] = React.useState([]);
+
+    const value = React.useMemo(() => {
+        // Set makes it simple to add/remove sheets
+        const sheets = new Set();
+        return {
+            addSheet(sheet) {
+                sheets.add(sheet);
+                setStylesheets([...sheets]); // Possibly not the most efficient way to do this
+            },
+            removeSheet(sheet) {
+                sheets.delete(sheet);
+                setStylesheets([...sheets]);
+            }
+        }
+    }, []);
+
+    // Provide the context and render into a shadow root
+    return (
+        <ShadowContext.Provider value={value}>
+           <root.div styleSheets={stylesheets} {...props} />
+        </ShadowContext.Provider>);
+
+};