Need help understanding the Shadow DOM

Question

Reading through articles and tutorials about the Shadow DOM, I came across a description which confused me a bit:

"Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree."

So a Shadow tree is not part of the DOM tree? But the browser will still see it and render its contents?

Answer 1

I think the easiest way to understand shadow DOM is by example:

<div>
  <input type="range">
</div>

Your DOM for the above code will look exactly as you'd probably expect it:

div
- input[type=range]

But what your browser renders is something else: There's a horizontal line and a thumb (or knob or whatever you call it). So internally, the input has some child elements, but they are not exposed through the DOM:

div
- input[range]
  - bar
  - thumb

But as I already wrote: Those are not exposed through the DOM, so they are hidden to you, your CSS, your JS (this is not entirely true, browsers can give you some access, for example Webkit-based browsers allow you to manipulate the appearance of the thumb in CSS via the -webkit-slider-thumb pseudo element).

On the other hand, these elements need to be in the DOM somewhere to be rendered by the browser, and that's where shadow DOM comes in: Internally, the browser replaces every ocurence of input[type=range] in the DOM by the tree

input[range]
- bar
- thumb

And that is shadow DOM: Some elements that are children of certain elements, not because you put them there in your HTML, but because the parent element is defined to have these children (like the audio-element is defined to have a play-button) and that are not exposed through the DOM, but are generated by the browser internally.

A lot more examples and a more thorough explanation can be found here: What the Heck is Shadow DOM?