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

Question

我正在將 Vue 和 Bootstrap 用於根據官方 Vue 文檔（ https://cli.vuejs.org/guide/build-targets.html#web-component ）生成 web 組件的應用程序。 在大多數情況下，Bootstrap 和我的業務邏輯在 web 組件的#shadow-root中運行良好，就好像它在輕型 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 中。

是否存在考慮 Shadow DOM / web 組件封裝的第 3 方解決方案？

Answer 1

你的猜測是正確的。 使用document. 不查詢 shadowDOM。

並且可能沒有第 3 方解決方案，因為解決方案需要

• WebComponents 將鼠標位置傳達給外界。

• 主機查詢 shadowDOM（以及嵌套 shadowDOM 和嵌套 shadowDOM）

與（更受限制的）IFRAME 沒有太大區別

Answer 2

我在構建基於 LitElement 的 Web 組件時遇到了同樣的問題，並找到了以下解決方案：

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

確保以相應元素的 shadowRoot 為目標並運行 querySelectorAll 以監聽所有監聽“data-toggle='tooltip'”的 shadowRoot 子元素。