Javascript 如何使JS工具提示在阴影DOM中工作？

我正在为一个应用程序使用Vue&Bootstrap，在这个应用程序中，我根据Vue官方文档（）生成web组件。在web组件的

#shadow root

s中，引导和我的业务逻辑在大部分情况下工作正常，就好像它在光DOM中一样

但是，引导工具提示（基于Popper.js）在影子DOM中根本不起作用。我还尝试在shadowdom封装的代码中直接使用Popper.js和Tippy.js（）调用工具提示，完全避开了引导，但我仍然无法让它们工作

参见此处示例：

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

---

是否有第三方解决方案可以解决影子DOM/web组件封装问题？

您的猜测是正确的。3使用

文档的第三方解决方案。

不查询shadowDOM

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

• 网络组件将鼠标位置传达给外部世界

• 主机查询shadowDOM（以及嵌套shadowDOM和嵌套shadowDOM）

---

与IFRAME（甚至更受限制）没有太大不同，我在构建基于LitElement的Web组件时遇到了相同的问题，并找到了以下解决方案：

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

确保以相应元素的shadowRoot为目标，并运行querySelectorAll来侦听所有侦听“data toggle='tooltip'的shadowRoot子元素