gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 00:58:40 29 4
gpt4 key购买 nike

<分区>

我正在使用网络组件。

我有一个像这样的节点树,正如 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 元素的第一个影子根的方法。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com