fix attaching styles, check shadowroot

Author: definite2

src/hooks/useStyleSheet.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-extra-boolean-cast */
 import { RefObject } from "react";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-import { getShadowRoot } from "../utils/shadowRoot";
+import { getOwnerDocument } from "../utils/ownerDocument";
 import { getNonce } from "../utils/nonce";
 
 // Bundler is configured to load this as a processed minified CSS-string
@@ -14,23 +14,25 @@ const styleElementMap: Map<Document | ShadowRoot, HTMLStyleElement> = new Map();
  */
 export const useStyleSheet = (nodeRef: RefObject<HTMLDivElement>): void => {
   useIsomorphicLayoutEffect(() => {
-    const parentDocument = nodeRef.current
-      ? !!getShadowRoot(nodeRef.current)
-        ? getShadowRoot(nodeRef.current)
-        : nodeRef.current.ownerDocument
-      : document;
-
-    if (parentDocument && !styleElementMap.has(parentDocument)) {
+    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);
-      !!getShadowRoot(nodeRef.current)
-        ? parentDocument.appendChild(styleElement)
-        : parentDocument.head.appendChild(styleElement);
+      if (parentDocument instanceof ShadowRoot) {
+        parentDocument.appendChild(styleElement);
+      } else {
+        parentDocument.head.appendChild(styleElement);
+      }
     }
   }, []);
 };

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;
+};