fix(styles): change style injection way (#668)

fix #650
ReactTooltip · Feb 16, 2021 · 1e10cce · 1e10cce
1 parent 13ade50
commit 1e10cce
Showing 1 changed file with 26 additions and 20 deletions.
diff --git a/src/index.js b/src/index.js
@@ -176,29 +176,35 @@ class ReactTooltip extends React.Component {
 
   /* Look for the closest DOM root having tooltip and inject styles. */
   injectStyles() {
-    const { id } = this.props;
-    const targetArray = this.getTargetArray(id);
-    const domRoots = [];
-    targetArray.forEach(target => {
-      let parentNode = target.parentNode;
-      while (parentNode.parentNode && !parentNode.host) {
-        parentNode = parentNode.parentNode;
-      }
-      const head = parentNode.querySelector('head');
-      domRoots.push(head || parentNode);
-    });
-    if (domRoots.length) {
+    const { tooltipRef } = this;
+    if (!tooltipRef) {
+      return;
+    }
+
+    let parentNode = tooltipRef.parentNode;
+    while (parentNode.parentNode) {
+      parentNode = parentNode.parentNode;
+    }
+
+    let domRoot;
+
+    switch (parentNode.constructor.name) {
+      case 'HTMLDocument':
+        domRoot = parentNode.head;
+        break;
+      case 'ShadowRoot':
+      default:
+        domRoot = parentNode;
+        break;
+    }
+
+    // Prevent styles duplication.
+    if (!domRoot.querySelector('style[data-react-tooltip]')) {
       const style = document.createElement('style');
       style.textContent = baseCss;
       style.setAttribute('data-react-tooltip', 'true');
-      domRoots
-        .filter((item, idx, src) => src.indexOf(item) === idx)
-        .forEach(domRoot => {
-          // Prevent styles duplication.
-          if (!domRoot.querySelector('style[data-react-tooltip]')) {
-            domRoot.appendChild(style);
-          }
-        });
+
+      domRoot.appendChild(style);
     }
   }