Allow Tooltips/Popovers to work in shadow DOM

2 files changed, 25 insertions, 1 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 1c40dfed3..9fa53a71b 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -244,8 +244,9 @@ class Tooltip {
     if (this.isWithContent() && this._isEnabled) {
       $(this.element).trigger(showEvent)
 
+      const shadowRoot = Util.findShadowRoot(this.element)
       const isInTheDom = $.contains(
-        this.element.ownerDocument.documentElement,
+        shadowRoot !== null ? shadowRoot : this.element.ownerDocument.documentElement,
         this.element
       )
 
diff --git a/js/src/util.js b/js/src/util.js
index e9665d24f..1d804cf9d 100644
--- a/js/src/util.js
+++ b/js/src/util.js
@@ -142,6 +142,29 @@ const Util = {
         }
       }
     }
+  },
+
+  findShadowRoot(element) {
+    if (!document.documentElement.attachShadow) {
+      return null
+    }
+
+    // Can find the shadow root otherwise it'll return the document
+    if (typeof element.getRootNode === 'function') {
+      const root = element.getRootNode()
+      return root instanceof ShadowRoot ? root : null
+    }
+
+    if (element instanceof ShadowRoot) {
+      return element
+    }
+
+    // when we don't find a shadow root
+    if (!element.parentNode) {
+      return null
+    }
+
+    return Util.findShadowRoot(element.parentNode)
   }
 }