我花了一些时间搜索,但只看到了太多常规的“遍历DOM”博客或仅使用getRootnode()
向上遍历一个级别的答案
伪代码:
HTML
<element-x>
//# shadow-root
<element-y>
<element-z>
//# shadow-root
let container = this.closest('element-x');
</element-z>
</element-y>
</element-x>
标准的element.closest()
函数不会穿过影子边界;
因此,this.closest('element-x')
返回null
,因为在<element-z>
shadowDom中没有<element-x>
。
目标:
从内部后代<element z>
(任何嵌套级别)中找到<element-x>
要求:
一个(递归的).closest()
函数,可以遍历(影子)DOM并找到<element-x>
注意:元素可能具有或不具有ShadowDOM(请参见<element y>
:仅限lightDOM)
我明天可以自己做,只是想知道是否已经有一些聪明的人已经完成了它。
资源:
- https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
- https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host
更新
以下是来自下面答案的未压缩代码:
closestElement(selector, base = this) {
function __closestFrom(el) {
if (!el || el === document || el === window) return null;
let found = el.closest(selector);
if (found)
return found;
else
__closestFrom(el.getRootNode().host);
}
return __closestFrom(base);
}
更新 #2
我将其更改为我的 BaseElement 上的一个方法:
closestElement(selector, el = this) {
return (
(el && el != document && el != window && el.closest(selector)) ||
this.closestElement(selector, el.getRootNode().host)
);
}
事件
如Intervalia所述,是的,事件是另一种解决方案。
但是...事件需要附加到一个祖先元素... 如何知道要使用哪个祖先元素?