fix(selector): Add support for shadow DOM elements

ReactTooltip · Oct 28, 2019 · 99be4d1 · 99be4d1
1 parent 11ee685
commit 99be4d1
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/index.js b/src/index.js
@@ -186,15 +186,25 @@ class ReactTooltip extends React.Component {
    * Pick out corresponded target elements
    */
   getTargetArray (id) {
-    let targetArray
+    let targetArray = [];
+    let selector;
     if (!id) {
-      targetArray = document.querySelectorAll('[data-tip]:not([data-for])')
+      selector = '[data-tip]:not([data-for])';
     } else {
-      const escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
-      targetArray = document.querySelectorAll(`[data-tip][data-for="${escaped}"]`)
+      const escaped = id.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+      selector = '[data-tip][data-for="' + escaped + '"]';
     }
-    // targetArray is a NodeList, convert it to a real array
-    return nodeListToArray(targetArray)
+
+    // Scan document for shadow DOM elements
+    nodeListToArray(document.getElementsByTagName('*'))
+    .filter(element => element.shadowRoot)
+    .forEach(element => {
+        targetArray = targetArray.concat(nodeListToArray(element.shadowRoot.querySelectorAll(selector)));
+    });
+
+    targetArray = targetArray.concat(nodeListToArray(document.querySelectorAll(selector)));
+
+    return targetArray
   }
 
   /**