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

Solution 1:

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.

Solution 2:

To add to the accepted answer. The closed mode of Shadow DOM has the single benefit which is to provide Web Component authors with the flexibility to decide how (if at all) to expose the Shadow Root of the component. However, it's incredibly easy to circumvent any efforts a component author makes at hiding the Shadow Root so it's probably not worth bothering. See Open vs. Closed Shadow DOM for a more detailed explanation.