title: What is the difference between open and closed shadow DOM encapsulation mode?
body: <p>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.</p>
  
  <p>When I looked at the documentation for <code>Element.createShadowRoot</code> I saw it was deprecated so I checked out <code>Element.attachShadow</code>. 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.</p>
  
  <p>What is the difference between the modes and which one should I use for what I am trying to achieve?</p>