如何使JS工具提示在Shadow DOM中工作？

Question

我正在使用 Vue & Bootstrap 作为一个应用程序，根据官方 Vue 文档（https://cli.vuejs.org/guide/build-targets.html#web-component）生成 Web 组件。在大多数情况下，Bootstrap和我的业务逻辑在Web组件的s中工作正常，就好像它在轻量级DOM中一样。#shadow-root但是，Bootstrap工具提示（基于 Popper.js https://popper.js.org/）在 Shadow DOM 中根本不起作用。我还尝试在Shadow DOM封装代码中直接使用Popper.js和Tippy.js（https://atomiks.github.io/tippyjs/）调用工具提示，完全避开Bootstrap，但我仍然无法让它们工作。请参阅此处的示例：https://jsfiddle.net/mfep6rg9/我可以猜到为什么 - 第三方工具提示库很可能找不到目标DOM元素，因为它位于Shadow DOM中。有没有第三方解决方案可以考虑Shadow DOM / Web组件封装？

Answer 1

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

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

• Web组件，用于向外界传达鼠标位置。

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

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

Answer 2

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

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

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