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

javascript html dom shadow-dom
metarmask picture metarmask · Oct 8, 2016 · Viewed 10.2k times · Source

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?

Answer

Supersharp picture Supersharp · Oct 8, 2016

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 both modes for you want to achieve.

Here is a detailed explanation of the differences.

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More