Как скрыть тень Root элемент?

Question

Я пытаюсь скрыть div (блок ответов), вложенный в теневой элемент Root, но не могу этого сделать.

Когда я проверяю страницу с помощью инструментов разработчика, это формат:

В конце я использую следующее моего кода для работы с элементом shadow Root:

    <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

Во время выполнения обратного вызова 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)
} )

Answer 2

Если crowdElement.shadowRoot возвращает null, тогда этот Shadow DOM равен closed. Это означает, что его внутренние реализации недоступны и не могут быть изменены с JavaScript. Здесь вы можете узнать больше о закрытых теневых DOM.