尽管已打开

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);
} )