javascript - 尽管打开，但 ShadowRoot 属性为 null

Question

我正在尝试访问元素上的 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() 输出，您可以看到 shadowRoot 肯定在那里。
(来自 Firefox 控制台)

我在最新的 Firefox 和 Chrome 中都试过了，结果都是一样的。
我做错了什么？

谢谢

编辑

我创建了 a little JSFiddle .
如果您按 F12 并查看控制台，您可以看到该元素已记录并显示 shadowRoot 属性，但记录 shadowRoot 显示 空。

我想知道这是不是一个错误？也许它还没有完全实现？

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

Answer 1

注意脚本执行顺序。

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

It works当您在正确的时间获得值(value)时。

您可以使用 whenDefined() 方法来确保元素已定义:

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