javascript - 如何在不同的 Web 组件中获取元素？

Question

使用 JavaScript 时，向元素添加影响 DOM 不同部分的事件是很常见的。要处理这些事件，可以使用类似getElementByIdor的方法getElementsByClassName。但是，在使用 Web 组件和影子 DOM 时，您不能直接访问位于不同组件中的元素。你必须想办法绕过影子 DOM 封装。到目前为止，我一直在这样做：

document.getElementById("root").shadowRoot.querySelector("#my-element");

通过这种方式，我访问了我的应用程序的主要根组件，然后是它的影子 DOM，最后是我的目标元素。但是，如果我需要在一个组件内的组件内获取一个元素，而该组件又在另一个组件内呢？我的代码将是一个看起来不太易于维护的长链。

这就是为什么我想知道，有没有更好的方法来做到这一点？在这方面是否有任何模式或最佳实践？

标签： javascriptweb-componentshadow-dom