javascript - 如何获取包含给定元素的 shadowRoot 的引用

<分区>

我正在使用网络组件。

我有一个像这样的节点树，正如 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">

我能够获得对 <button> 的引用通过在 Web 组件类之外启动的事件监听器。

类似于此:

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 ，如下面的代码片段所示:

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>

关于javascript - 如何获取包含给定元素的 shadowRoot 的引用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60130844/

上一篇：展开 html 标签后的 Vim 光标位置

下一篇：backbone.js - i18next 未加载翻译文件

相关文章：

javascript - 悬停时识别 Javascript 上的单词

javascript - GPL、javascript 和在线游戏

javascript - Node + Express JS API 不工作

javascript - Polymer:如何访问 'content' 标签内的元素

css - 如何自定义预定义元素

javascript - 使用 ng-repeat 迭代 AngularJS 中的数组

javascript - 使用 Open WC Karma-ESM 插件测试 Typescript 文件时出错

angular - 如何在 angular 2 指令中有条件地插入/删除主机 DOM 元素

css - 如何在不修改第三方元素的情况下替换::shadow

css - 如何摆脱 shadow-dom 中的用户代理样式表