fix attaching styles, check shadowroot

definite2 · definite2 · commit 41668c1d7f0b · 2022-09-20T11:13:32.000+03:00
diff --git a/src/hooks/useStyleSheet.ts b/src/hooks/useStyleSheet.ts
@@ -1,30 +1,38 @@
+/* eslint-disable no-extra-boolean-cast */
 import { RefObject } from "react";
-
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import { getOwnerDocument } from "../utils/ownerDocument";
 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;
-
-    if (typeof parentDocument !== "undefined" && !styleElementMap.has(parentDocument)) {
-      const styleElement = parentDocument.createElement("style");
+    const ownerDocument = getOwnerDocument(nodeRef.current);
+    const parentDocument = ownerDocument || document;
+    if (
+      parentDocument &&
+      typeof parentDocument !== "undefined" &&
+      !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);
+      if (parentDocument instanceof ShadowRoot) {
+        parentDocument.appendChild(styleElement);
+      } else {
+        parentDocument.head.appendChild(styleElement);
+      }
     }
   }, []);
 };
diff --git a/src/utils/ownerDocument.ts b/src/utils/ownerDocument.ts
@@ -0,0 +1,11 @@
+export const getOwnerDocument = (node: HTMLElement | null): ShadowRoot | Document | null => {
+  let parent = node && node.parentNode;
+  const ownerDocument = node && node.ownerDocument;
+  while (parent) {
+    if (parent instanceof ShadowRoot) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+  return ownerDocument;
+};
