fix attaching styles, check shadowroot

definite2 · definite2 · commit a06e1ec1f3c4 · 2022-06-05T21:36:43.000+03:00
diff --git a/src/hooks/useStyleSheet.ts b/src/hooks/useStyleSheet.ts
@@ -1,30 +1,36 @@
+/* eslint-disable no-extra-boolean-cast */
 import { RefObject } from "react";
-
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import { getShadowRoot } from "../utils/shadowRoot";
 import { getNonce } from "../utils/nonce";
 
 // Bundler is configured to load this as a processed minified CSS-string
 import styles from "../css/styles.css";
 
-const styleElementMap: Map<Document, HTMLStyleElement> = new Map();
+const styleElementMap: Map<Document | ShadowRoot, HTMLStyleElement> = new Map();
 
 /**
  * Injects CSS code into the document's <head>
  */
 export const useStyleSheet = (nodeRef: RefObject<HTMLDivElement>): void => {
   useIsomorphicLayoutEffect(() => {
-    const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;
+    const parentDocument = nodeRef.current
+      ? !!getShadowRoot(nodeRef.current)
+        ? getShadowRoot(nodeRef.current)
+        : nodeRef.current.ownerDocument
+      : document;
 
-    if (typeof parentDocument !== "undefined" && !styleElementMap.has(parentDocument)) {
-      const styleElement = parentDocument.createElement("style");
+    if (parentDocument && !styleElementMap.has(parentDocument)) {
+      const styleElement = document.createElement("style");
       styleElement.innerHTML = styles;
       styleElementMap.set(parentDocument, styleElement);
 
       // Conform to CSP rules by setting `nonce` attribute to the inline styles
       const nonce = getNonce();
       if (nonce) styleElement.setAttribute("nonce", nonce);
-
-      parentDocument.head.appendChild(styleElement);
+      !!getShadowRoot(nodeRef.current)
+        ? parentDocument.appendChild(styleElement)
+        : parentDocument.head.appendChild(styleElement);
     }
   }, []);
 };
diff --git a/src/utils/shadowRoot.ts b/src/utils/shadowRoot.ts
@@ -0,0 +1,10 @@
+export const getShadowRoot = (node: any) => {
+  let parent = node && node.parentNode;
+  while (parent) {
+    if (parent.toString() === "[object ShadowRoot]") {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+  return null;
+};
