如何隐藏 shadowRoot 元素？

Question

我试图隐藏嵌套在 shadowRoot 元素中的 div（答案框），但似乎无法这样做。

当我使用开发工具检查页面时，格式如下：

我在代码末尾使用以下代码来处理 shadowRoot 元素：

    <script>
        $(document).ready(function ()
        {
            var crowdElement = document.getElementById('myCrowd');
            console.log(crowdElement);
            var shRoot = crowdElement.shadowRoot;
            console.log('Here is the var: ' + shRoot)
        });
    </script>
</body>
</html>

但它在控制台中返回为 null。

Answer 1

如果 crowdElement.shadowRoot 返回 null 那么这个影子 DOM 就是 closed。这意味着它的实现内部是无法从 JavaScript 访问和更改的。 Here 你可以阅读更多关于封闭阴影 DOMs.

Answer 2

在您执行 ready 回调时，自定义元素 <crown-form> 尚未定义。

可能是因为自定义元素定义的加载被延迟或异步。

您应该使用whenDefined()等待它。

customElements.whenDefined( 'crowd-form' ).then( () => {  
    var crowdElement = document.getElementById('myCrowd');
    console.log(crowdElement);
    var shRoot = crowdElement.shadowRoot;
    console.log('Here is the var: ' + shRoot)
} )

如何隐藏 shadowRoot 元素？

How to hide shadowRoot element?

html

shadow-dom