我正在使用Web组件。
我有一个像这样的节点树，如chrome dev工具检查器所描述：
<div>
-- <my-fancy-custom-elem> (this is the web component)
---- #shadow-root
------ <div class="button-container">
-------- <button class="a-button-in-a-web-comp">
我能够通过在Web组件类的外部启动的事件侦听器获取对<button>的引用。
类似于此：
document.addEventListener("click", (event) => {
const clickedElem = event.composedPath()[0]
if(clickedElem.matches('.a-button-in-a-web-comp')){
console.log(clickedElem.parentNode.parentNode)
}
});
我可以通过调用#shadow-root获得对clickedElem.parentNode.parentNode的引用。但是，我正在寻找一种方法来可靠地获取<button>的影子根祖先，无论它在树中有多深。即使我不知道它活在树上有多深。
换句话说，当我引用X时，我正在寻找一种可靠地返回包含X元素的第一个阴影根的方法。
您可以调用clickedElem.getRootNode()以获得shadowRoot，如下面的代码片段所示：