尽管打开，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。

我想知道这是不是一个错误？可能还没有完全实现？

我看过但我使用的是最新的 (65) Firefox 和 (72) Chrome.

Answer 1

注意脚本执行顺序。

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

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

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

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

尽管打开，ShadowRoot 属性仍为空

ShadowRoot property is null despite open

javascript

shadow-dom

custom-element

尽管打开，ShadowRoot 属性 仍为空

ShadowRoot property is null despite open

javascript

shadow-dom

custom-element

尽管打开，ShadowRoot 属性仍为空