在shadow DOM中使用第三方脚本

Question

我正在开发基本可重用控件的自定义元素（例如按钮，菜单，数据表等）。我知道浏览器支持自定义元素和阴影DOM，但我做得很好一般可用的填料。

对于某些自定义元素，我使用第三方脚本来获得额外的功能，但有时当它们必须以某种方式操作DOM时，它们无法正常工作。

每当外部脚本想要按类或id搜索元素时，就会发生这种情况。显然是电话

document.getElementById (id)

或

document.getElementsByClassName (class)

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

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

那么，如果没有解析整个脚本并将其重写为可在阴影DOM上下文中使用，是否有解决此问题的方法？

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

Answer 1

解决方法是拉出第三方库需要从Shadow DOM中捕获的元素。

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

使用<slot>元素将其插入Shadow DOM中。

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

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

当然它并不是真正的Shadow DOM，但它适用于大多数第三方库。

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