尽管打开，ShadowRoot 属性为空

Question

我正在尝试访问元素上的 ShadowRoot 并且该属性element.shadowRoot正在返回null.
在ShadowDOM被定义为mode: 'open'，这是正确的，我甚至可以console.log(element)看到所有的属性和shadowRootIS的目的ShadowRoot的类型。

在我的应用程序中，我试图像这样访问该属性：

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

这个可以吗？

附件是console.log()控制台的输出，你可以看到shadowRoot肯定在那里。
（来自 Firefox 控制台）

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

谢谢

编辑

我创建了一个小 JSFiddle。
如果您按下F12并查看控制台，您可以看到该元素已被记录并显示该shadowRoot属性，但会记录shadowRoot显示null。

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

我在 Firefox 中看到了Element.shadowRoot，但我使用的是最新的 (65) Firefox 和 (72) Chrome。

Answer 1

注意脚本执行顺序。

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

当您在正确的时间获得价值时，它就会起作用。

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

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