尽管打开，ShadowRoot属性为null

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。

我想知道这是不是一个bug？也许还没有完全实现呢？

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

Answer 1

注意脚本执行顺序。

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

当你在合适的时间得到价值时，shadowRoot。

您可以使用It works方法确保元素已定义：

whenDefined()