在 shadow 中使用第三方脚本 DOM

Question

我正在为基本的可重用控件（例如按钮、菜单、数据表等）开发自定义元素。我知道浏览器支持自定义元素和阴影 DOMs，但总的来说，我对可用的 polyfill 做得很好。

对于某些自定义元素，我使用第三方脚本来实现额外功能，但有时当它们必须以某种方式操纵 DOM 时，它们无法按预期工作。

每次外部脚本想要通过 class 或 id 搜索元素时都会发生这种情况。明明是调用

document.getElementById (id)

或

document.getElementsByClassName (class)

不起作用，因为在全局 DOM 中找不到具有 id 或 class 的元素，但在影子 DOM.

中

据我所知，您不能在 javascript 中给文档变量一个新的引用。

那么，有没有不解析整个脚本并重写它以使其在影子 DOM 上下文中可用的解决方案？

编辑：这不是关于从影子 DOM 中获取元素，而是如何使用不知道必须在影子 DOM 中搜索它们的第 3 方脚本，它们是从中调用的，而不是在主要DOM。正如 CBroe 在评论中指出的那样。

Answer 1

解决方法是将第 3 方库需要的元素拉出阴影 DOM。

<your-element>
  <div id="visible-id" class="visible-class"></div>
</your-element>

并使用 <slot> 元素将其插入阴影 DOM 中。

注意： 我使用了一个直接的 HTML 示例，但您可以在创建自定义元素时通过脚本插入可调用元素：

connectedCallback () {
    this.innerHTML = '<div id="visible-id"></div>'
}

当然它并不真正在影子中 DOM 但它适用于大多数第 3 方库。

您也可以根据需要选择完全不使用 Shadow DOM。

Use of third-party scripts in shadow DOM