在 shadow DOM 中使用第三方脚本答案

【问题标题】：Use of third-party scripts in shadow DOM在 shadow DOM 中使用第三方脚本
【发布时间】：2018-11-15 23:23:34
【问题描述】：

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

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

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

document.getElementById (id)

或

document.getElementsByClassName (class)

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

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

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

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

【问题讨论】：

How to get element in shadow root with JavaScript?的可能重复
@Protozoid 并不是真正的重复恕我直言；那里是关于如何使用专门为此目的编写的代码访问 shadow DOM 中的元素，但这里的问题主要是如何处理没有考虑“shadow DOM 能力”编写的第 3 方脚本。
@CBroe Fair ...也许这个讨论会有所帮助stackoverflow.com/questions/45917672/…这表明在需要第三方库可插入性时，ShadowDOM 不是合适的方法
@Protozoid 是的，我可以同意这一点。 shadow DOM 的主要目的之一是与“其余部分”隔离，因此使用 3rd-party 库进行填充可能会破坏一开始的重点。
您尝试使用哪些第 3 方脚本？ stackoverflow.com/questions/50698021/…

【解决方案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。

【讨论】：

非常好的建议！但是在阅读了有关插槽后，我不确定是否可行：

（因为重复的ID）
这将取决于您使用的第 3 方库将如何处理多个实例：您可以提供 2 个不同的 id/类名称，也可以不提供。它与插槽无关，但与库行为有关
好的，我试过了，它有效。即使自定义元素的底层结构不再位于 shadow DOM 中，我仍然喜欢这样一个事实，即我只需将自定义元素添加到 DOM 并拥有所有功能。所以，非常感谢！