javascript - 在 shadow DOM 中使用第三方脚本

Question

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

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

每次外部脚本想要按类或 ID 搜索元素时都会发生这种情况。明明是调用

document.getElementById (id)

或

document.getElementsByClassName (class)

不起作用，因为具有 id 或 class 的元素无法在全局 DOM 中找到，而是在影子 DOM 中找到。

据我所知，您不能在 javascript 中为文档变量提供新的引用。

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

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

Answer 1

解决方法是将第 3 方库需要的元素从 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 中，但它可以与大多数第 3 方库一起使用。

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