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

我正在尝试访问元素上的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。

最佳答案

请注意脚本的执行顺序。

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

在正确的时间获取值时，添加It works。

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

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