javascript - 自定义元素 getRootNode.closest() 函数跨越多个(父)shadowDOM 边界

Question

我花了一些时间进行搜索，但只看到太多常规的“遍历 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-x>在 <element-z> 内shadowDom

目标:

查找<element-x>来自后代 <element z> (任何嵌套级别)

必需:

A(递归).closest()遍历 (shadow) DOMs 并找到 <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 评论；是的，事件是另一种解决方案。
但是……一个事件需要附加到一个祖先……如何知道要使用哪个祖先？

Answer 1

这与 .closest() 相同从任何子(影子)DOM 中

但是沿着 DOM 走穿越 shadowroot 边界

针对(极端)缩小进行了优化

//declared as method on a Custom Element:
closestElement(
    selector,      // selector like in .closest()
    base = this,   // extra functionality to skip a parent
    __Closest = (el, found = el && el.closest(selector)) => 
        !el || el === document || el === window
            ? null // standard .closest() returns null for non-found selectors also
            : found 
                ? found // found a selector INside this element
                : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
) {
    return __Closest(base);
}

注意:__Closest 函数被声明为“参数”以避免额外的 let 声明...更适合缩小，并防止您的 IDE 报错

从自定义元素内部调用:

<element-x>
//# shadow-root
    <element-y>
        <element-z>
        //# shadow-root
        let container = this.closestElement('element-x');
        </element-z>
    </element-y>
</element-x>