loading...
Cover image for What is Shadow DOM??

What is Shadow DOM??

divyajyotiuk profile image Divyajyoti Ukirde ・1 min read

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/

Posted on by:

divyajyotiuk profile

Divyajyoti Ukirde

@divyajyotiuk

I'm currently 🌱 learning and πŸ”­ working on the Javascript Ecosystem. πŸ˜„ Pronouns: she/her ⚑ Fun fact: I have a Computer Engineering background but the most credit goes to Google and Stack Overflow

Discussion