Javascript 如何在不同的web组件中获取元素？

在使用JavaScript时，向影响DOM不同部分的元素添加事件是非常常见的。要处理这些事件，可以使用

getElementById

或

getElementsByClassName

等方法。 但是，在使用web组件和影子DOM时，不能直接访问位于不同组件中的元素。您必须找到一种绕过阴影DOM封装的方法。到目前为止，我一直在这样做：

document.getElementById（“根”）.shadowRoot.querySelector（“我的元素”）

通过这种方式，我访问应用程序的主要根组件，然后是它的影子DOM，最后是我的目标元素。但是如果我需要在一个组件中得到一个元素，而这个元素又在另一个组件中，该怎么办呢？我的代码将是一个长链，似乎不太可维护

这就是为什么我想知道，有没有更好的方法？在这方面有什么模式或最佳实践吗？
querySelector
遵循类似css的选择器样式。因此，它可能是
document.querySelector（“#root#my element#my孙子元素”）
您关于如何使用Javascript和DOM的概念不适合组件方法。组件是软件的封装件；如果您需要它们相互通信，您可以使用类似于观察者模式的通用开发模式。请给出一个示例用例，其中一个组件想要访问另一个组件的内部（它实际上永远不应该访问）。最好的方法是使用组件事件。大多数web组件都有编写自定义事件的方法，但如果组件没有该功能，则可以看到组件添加到元素中的
Id
或
class
，并使用它来获取元素component@connexo好的，谢谢你的反馈，我将检查shadow dom
但很明显，你缺乏我们从父母那里学到的关于“如何尊重他人”的最基本的知识。
一个成熟、受过良好教育的人知道如何文明行事，尊重他人。我把它作为评论而不是回答。评论更像是讨论的场所。如果我或任何人缺乏知识，我们可以保持简单并讨论它，这就是一个社区的发展，没有理由传播仇恨。请立即删除您的评论。如果回答错误，shadowDOM将阻止选择器。事件是在组件之间创建通信的最简单方法；这里是一个游乐场：