如何隐藏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>

，但在控制台中返回为空。

Answer 1

在执行ref={ref}回调时，尚未定义自定义元素ready。

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

您应该使用<crown-form>等待它。

whenDefined()

Answer 2

如果crowdElement.shadowRoot返回null，则此影子DOM为closed。这意味着它的实现内部无法通过JavaScript进行访问和更改。 Here，您可以了解有关封闭阴影DOM的更多信息。