javascripthtmldomshadow-dom

What is the difference between open and closed shadow DOM encapsulation mode?

I want to create a shadow DOM for an element so I can display elements for a Chrome extension without the page styles affecting them.

When I looked at the documentation for Element.createShadowRoot I saw it was deprecated so I checked out Element.attachShadow. It said I had to provide an encapsulation mode but did not explain what the different modes do. I searched a bit but I wasn't able to find anything clearly explaining what the difference was.

What is the difference between the modes and which one should I use for what I am trying to achieve?

Solution

  • With the open mode you can access the Shadow DOM via the shadowRoot property of the HTML element.

    With the closed mode you cannot. shadowRoot will return null.

    You can use either mode depending on what you want to achieve.

    Here is a detailed explanation of the differences.