CODEWITHSUNDEEP
htmlshadow-dom
AppleBaggins
AppleBaggins

Reputation: 454

How to hide shadowRoot element?

I'm trying to hide a div (answers-box) nested in a shadowRoot element, but can't seem to do so.

When I inspect the page with dev tools, this is the format:

shadowRoot

I'm using the following at the end of my code to work with the shadowRoot element:

    <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>

but it comes back as null in the console.

Upvotes: 1

Views: 2517

Answers (2)

Supersharp
Supersharp

Reputation: 31181

At the time you execute the ready callback the Custom Element <crown-form> is not defined yet.

Probably because the loading of the Custom Element definition is deferred or asynchronous.

You should wait for it by using 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)
} )

Upvotes: 1

alexortizl
alexortizl

Reputation: 2690

If crowdElement.shadowRoot is returning null then this Shadow DOM is closed. This means that its implementation internals are inaccessible and unchangeable from JavaScript. Here you can read more about closed shadow DOMs.

Upvotes: 1

Related Questions