Shadow DOM

• A DOM element can have two types of DOM subtrees:
  • Light Subtree (Regular DOM)
  • Shadow Subtree
• Shadow DOM has own stylesheets
• It has own element ids space and do not interfere with regular DOM
• Invisible to JS selectors
• It is used for:
  • custom elements to hide component internals
  • Used by browser to implement the native controls and hide/encapsulate its implementation
• Browser native shadow trees are such as <input type="range"> are closed and inaccessible
• To see shadow DOM:
  • Open Chrome Devtools
  • Go to settings on top right
  • Go to Preferences > Elements
  • Enable Show User Agent Shadow DOM