如何获得包含给定元素的shadowRoot的引用[重复]

Question

我正在使用 Web 组件。

我有一个像这样的节点树，正如 chrome 开发工具检查器所描述的那样：

<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)
   }
});

我可以通过调用clickedElem.parentNode.parentNode 获得对#shadow-root 的引用。但是，我正在寻找一种方法来可靠地获取 <button> 的影子根祖先，无论它在树中有多深。即使我不知道它住在树的深处。

换句话说，当我引用 X 时，我正在寻找一种方法来可靠地返回包含 X 元素的第一个影子根。

Answer 1

可以调用clickedElem.getRootNode()获取shadowRoot，如下sn-p所示：

class CustomButton extends HTMLElement{
  constructor(){
    super();
    this.attachShadow({"mode": "open"});
    this.shadowRoot.innerHTML = `
      <div>
        <button class="a-button-in-a-web-comp">Button</button>
       </div>
    `;
  }
}
customElements.define('custom-button', CustomButton);

document.addEventListener("click", (event) => {
   const clickedElem = event.composedPath()[0];
   if(clickedElem.matches('.a-button-in-a-web-comp')){
     console.log(clickedElem.getRootNode())
   }
})

<custom-button></custom-button>