DEV Community

Cover image for What is Shadow DOM??
Divyajyoti Ukirde
Divyajyoti Ukirde

Posted on

What is Shadow DOM??

Shadow DOM is basically a sub-tree of DOM elements, which is included during rendering of the document but not included in the main document DOM. In other words, the content of a Shadow DOM is a different document, which is merged with the main document to create the overall rendered output.

Take an example of slider:

<input id="foo" type="range">

Slider

The thumb on the slider moves, when you have not written any css or javascript.

If you do inspect element on the slider you might see something like this:
inspect slider

Now, to enable Shadow Root you need to:

  1. inspect element
  2. click on the gear icon in the top right corner
  3. Go to Elements
  4. enable Show user agent shadow DOM

Now, try inspecting element again.
Do you see this?
shadow-root

You can override the default styles and tweak some beautiful features!

You could try it for <audio> and <video> HTML5 tags.

This is the link, I referred to understand.
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Top comments (2)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt
Collapse
 
divyajyotiuk profile image
Divyajyoti Ukirde

Yup! :)