javascript - 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>