Ever wondered how writing <input type=“file”> or <input type=“range”> gives a button and a range slider UI respectively?
Welcome to powerful encapsulation technique called shadow DOM. This DOM structure is usually hidden but if you want to see it, enable “Show user agent shadow DOM” in Chrome Dev Tools -> Settings (cog icon) -> Preferences -> elements tab. These elements are unreachable through normal CSS and JavaScript.
What you see below #shadow-root is a shadow DOM.
They are unaffected by outside CSS, they have their own stylesheets.
In the above example, all p should be red, but inside the shadow DOM, p is unaffected.
Inbuilt shadow tress (shadow DOM) cannot be reached via JavaScript as well (following docs).
How to create shadow DOM?
const shadow = elem.attachShadow({mode: "open | closed"});
This piece of code will create a shadow tree and return the reference. Now you may attach whatever you want to this reference using basic DOM APIs.
If you want to access this outside, you can simply get the shadowParent (check above image line 50). Then you can access shadow elements by using elem.shadowRoot (provided mode is open).
If mode was closed while creating, then they are not accessible.
All in all, this is a very powerful encapsulation technique using which you can create your own custom components in isolation from rest of the code making your component highly reusable without getting concerned about how the outside styling or markup may affect your component.
