31

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?

metarmask
  • 1,747
  • 1
  • 16
  • 20
  • 1
    here's a good overview of the practical differences (or lack thereof): https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af – Erik Kaplun Mar 14 '18 at 11:30

2 Answers2

27

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.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • 1
    Is there any way for a Chrome extension to "open" or manipulate a closed shadow DOM? – Pacerier Feb 09 '17 at 22:40
  • @Pacerier No as the closed mode is meant for do being able to do that. – Supersharp Feb 10 '17 at 07:40
  • Does this mean I could wrap my whole page in a component, and then keep users extensions from doing anything to it? – Seph Reed Aug 02 '17 at 05:12
  • Yes, if the extension uses CSS or queryselctor() to access le element, it won't see them – Supersharp Aug 03 '17 at 10:10
  • 3
    @SephReed A chrome extension can modify the attachShadow function to give itself access by using a content script injected at "document_start". – metarmask Sep 05 '17 at 20:35
  • @metarmask could you be so kind as to point out a sample on how to do this, please? I'm stuck with a problem where I have to access a closed Shadow DOM for a Selenium test case, and I can write a Chrome Extension for the site and add it through the Chrome Driver, in order to open it up. Thank you so much for the tip, at least. If there's a sample that you know of for this scenario to get me started, I would really appreciate it. – Pascal Feb 28 '19 at 13:46
12

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.

Leon Revill
  • 1,950
  • 3
  • 18
  • 25
  • First of all, thank you for your answer and awesome blog post. I'm stuck with a problem where I have to access a closed Shadow DOM for a Selenium test case, and I need to open it. Do you have a working example that demonstrates the code to open the closed Shadow DOM? I can write a Chrome Extension for the site and add it through the Chrome Driver, in order to open it up, if that's needed. – Pascal Feb 28 '19 at 14:22
  • This is not exactly correct. Given that we can use Weakmap, or even closures if done carefully, to hide access to any private data, encapsulation, if it is truly preferred by the author, is not easy to break open without using e.g. eval, an exploit or some other method. – Nolo Apr 30 '19 at 05:20