Need help understanding Shadow DOM

Question

Looking through articles and tutorials about Shadow DOM, I came across a description that confused me a bit:

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

So, the shadow tree is not part of the DOM tree? But will the browser still see it and display its contents?

Answer 1

From the Shadow DOM specification ,

A document tree is a node tree, root of a node is a document.

Any element can contain a host of zero or one node tree associated with it, called a shadow tree .

A shadow host is an element that hosts one shadow tree.

A shadow root is the root of the shadow tree node.

Tree of trees - tree of trees node.

Then yes, the shadow trees are outside the document tree, but they are still connected to form a tree of trees.

And yes, the content of the shadow is displayed instead of the children of the element, as defined in CSS Scoping :

The most recently created shadow tree of an element is the active shadow tree for this element.

Descendants of the shadow host should not create fields in the format tree. Instead, the contents of the active shadow tree generate the fields as if they were the contents of the element.

Answer 2

I think the simplest way to understand shadow DOM can be found with an example:

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

Your DOM for the above code will look exactly as you would expect this:

 div - input[type=range] 

But what your browser does is something else: there is a horizontal line and a thumb (or a pen or whatever you call it). Thus, inside the input there are some children, but they are not displayed through the DOM:

 div - input[range] - bar - thumb 

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

On the other hand, these elements should be in the DOM, which should be displayed by the browser, and that where the shadow DOM appears: inside the browser, every ocurence input[type=range] in the DOM tree is replaced

 input[range] - bar - thumb 

And this is the shadow of the DOM: some elements that are children of certain elements, and not because you put them there in your HTML, but since the parent element is defined to have these children (for example, for the audio element it is determined that the play-button ), which are not displayed through the DOM, but are created by the internal browser.

More detailed examples and a more detailed explanation can be found here: What is Heck - is it a DOM Shadow?

Answer 3

Looks like the quote is taken from this article under the heading: What is Heck - is it a DOM Shadow?

The shadow DOM is part of the DOM (but the virtual DOM is a hidden copy of the DOM. Sorry there was confusion with the virtual DOM before!). From a review of this W3 Spec, it can again be seen that the shadow DOM is just a reusable DOM fragment. The browser will see it and display it.

This specification describes a method for combining multiple DOM trees into a single hierarchy and how these trees interact with each other in a document, which improves the layout of the DOM.

This technology has existed since at least 2006, when I started using .innerHTML and templates inside JavaScript to create reusable DOM fragments. This is not a new technology. It is simply documented in 2015 by the W3C as an official specification.

These CSS and pseudo-selector attributes are interesting, which work on the Shadow DOM but are not part of the Real DOM. They are described at the bottom of the Textured Trees section of W3 Spec .

:: shadow pseudo-element

/ deep / combinator, which has been replaced by →> the combinator (or the combiner of the descendants of the piercing shadow)

:: Content pseudo-element

: host pseudo-class and: host () functional pseudo-class

: host context () functional pseudo-class

They kind of add to these selectors, which people sometimes use to create <div> tags using pointers / pointers to other elements on the screen:

::before and ::after

Additional update:

I found more details in Shadow DOM 101 . When viewing "Hello, my name is an example of Bob ... Shell" (about 1/2 way down the page), which is located directly above this text block ...

Now we have reached the separation of content and presentation. Content is in the document; The presentation is in the Shadow DOM. They are automatically synchronized by the browser when the time comes to do something.

... we can check the DOM and see what the DOM DOM looks like. It looks like CSS and HTML can be encapsulated inside the shadow DOM element, which is hidden inside the <div> . See: https://developer.chrome.com/devtools/docs/settings-files/show-shadow-dom.png

The idea seems to be to encapsulate CSS and HTML so that it doesn't go to other areas of the page. Also, do not allow the use of other existing / per page code in order to influence what is inside this encapsulated code. Previous examples of this encapsulation would be hidden <iframe> tags, which were designed to serve ads, but did not allow third-party ad code to break JS on our really interesting web pages.

Here are some more Shadow DOM links:

• Shadow DOM 101
• Shadow DOM 201
• Shadow DOM 301
• Visualizing DOM DOM Concepts