Javascript 在shadowdom中使用第三方脚本 我正在开发基本的可重用控件的自定义元素（例如按钮、菜单、数据表等）。我知道浏览器支持自定义元素和阴影DOM，但我通常对可用的填充物做得很好。

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

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

document.getElementById (id)

或

无法工作，因为在全局DOM中找不到id或类为的元素，而在阴影DOM中找不到

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

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

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

编辑：

---

一般来说，这不是从shadowdom中获取元素，而是如何使用第三方脚本，这些脚本不知道它们必须在从中调用的shadowdom中搜索，而不是在主DOM中搜索。正如CBroe在评论中指出的那样。

一个解决方法是将第三方库需要捕获的元素从影子DOM中拉出来

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

并使用

元素将其插入阴影DOM中

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

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

connectedCallback（）{
this.innerHTML=“”
}  

当然，它不是真正的影子DOM，但它将与大多数第三方库一起工作

---

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

可能重复的@Protozoid不是真正重复的IMHO；在那里是关于如何使用专门为此编写的代码访问shadow DOM中的元素，但这里的问题主要是如何处理第三方脚本，这些脚本并没有考虑到“shadow DOM功能”。@CBroe Fair。。。这一讨论可能会有所帮助，因为它表明当需要第三方库时，ShadowDOM不是合适的方法pluggability@Protozoid是的，我有点同意。shadowdom的一个主要用途是与“rest”隔离，因此用第三方库填充它可能有点违背了这一点？非常好的建议！但在阅读了有关插槽的内容后，我不确定这是否可行：（因为id重复），这将取决于您使用的第三方库将如何处理多个实例：您可以提供两个不同的id/类名，也可以不提供。它与插槽无关，但与库行为有关。我试过了，它很有效。即使自定义元素的底层结构不再位于阴影DOM中，我仍然喜欢这样一个事实，即我只需将自定义元素添加到DOM中，并将所有功能隐藏起来。所以，非常感谢！