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

Question

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

然而，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/

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

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

Answer 1

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

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

• 用于向外界传达鼠标位置的 WebComponents。

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

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