ShadowRoot 属性为空，尽管打开

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 会显示null。

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

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

Answer 1

注意脚本执行顺序。

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

It works 在正确的时间获得价值。

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

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