如何让 JS 工具提示在 Shadow DOM 中工作？答案

【问题标题】：How to make JS tooltips work in Shadow DOM?如何让 JS 工具提示在 Shadow DOM 中工作？
【发布时间】：2020-05-20 21:01:22
【问题描述】：

我正在将 Vue 和 Bootstrap 用于我根据 Vue 官方文档 (https://cli.vuejs.org/guide/build-targets.html#web-component) 生成 Web 组件的应用程序。在大多数情况下，Bootstrap 和我的业务逻辑在 Web 组件的 #shadow-roots 中运行良好，就好像它在轻型 DOM 中一样。

但是，引导工具提示（基于 Popper.js https://popper.js.org/）在 Shadow DOM 中根本不起作用。我还尝试在 Shadow DOM 封装代码中直接使用 Popper.js 和 Tippy.js (https://atomiks.github.io/tippyjs/) 调用工具提示，完全避开 Bootstrap，但我仍然无法让它们工作。

在此处查看示例：https://jsfiddle.net/mfep6rg9/

我可以猜到原因——第 3 方工具提示库很可能找不到目标 DOM 元素，因为它位于 Shadow DOM 中。

是否有第 3 方解决方案可以解决 Shadow DOM/Web 组件封装？

【问题讨论】：

标签： javascript vue.js tooltip web-component shadow-dom

【解决方案1】：

你的猜测是正确的。使用 document. 的 3party 解决方案不查询 shadowDOM。

而且可能没有第 3 方解决方案，因为解决方案也需要

WebComponents 将鼠标位置传达给外界。
主机查询 shadowDOM（以及嵌套的 shadowDOM 和嵌套的 shadowDOM）

与（甚至更受限制的）IFRAME 没有太大区别

【讨论】：

【解决方案2】：

我在构建基于 LitElement 的 Web 组件时遇到了同样的问题，并找到了以下解决方案：

$(this.shadowRoot.querySelectorAll("[data-toggle='tooltip']")).tooltip();

确保以相应元素的 shadowRoot 为目标并运行 querySelectorAll 以监听所有监听“data-toggle='tooltip'”的 shadowRoot 子元素。

【讨论】：