代码之家  ›  专栏  ›  技术社区  ›  Luke T O'Brien

尽管打开,但shadowRoot属性为空

  •  1
  • Luke T O'Brien  · 技术社区  · 6 年前

    我正在尝试访问元素和属性上的shadowRoot element.shadowRoot 正在回归 null .
    这个 ShadowDOM 定义为 mode: 'open' 是的,我甚至可以 console.log(element) 查看所有属性和 shadowRoot 是一个对象 ShadowRoot 类型。

    在我的应用程序中,我尝试访问属性,如下所示:

    let el = document.getElementById('elementId');
    ...
    console.log(el);
    console.log("this.shadowRoot = ???");
    console.log(el.shadowRoot);
    

    这样行吗?

    附件是 console.log() 从控制台输出,如您所见 暗影根 当然有。
    (从Firefox控制台)
    enter image description here

    我在最新的火狐和Chrome上都试过,结果都一样。
    我做错什么了?

    谢谢

    编辑

    我创造了 a little JSFiddle .
    如果你按 F12 并查看控制台,您可以看到元素被记录并显示 暗影根 属性,但记录 暗影根 显示器 无效的 .

    我想知道这是不是个虫子?也许还没有完全实现?

    我见过 Element.shadowRoot in firefox 但我使用的是最新的火狐(65)和(72)Chrome。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Supersharp    6 年前

    注意脚本执行顺序。

    在您的示例中,您试图在定义自定义元素之前获取shadowRoot属性。

    It works 当你在正确的时间得到这个值。

    可以使用whendefined()方法来确保定义了元素:

    customElements.whenDefined( 'web-component ').then( () => {
        let el = document.getElementById('elementId');
        console.log(el.shadowRoot);
    } )