Difference between Light DOM and Shadow DOM

Question

I stumbled a couple of times into this Light DOM thing but wasn\'t able to understand the difference with Shadow DOM. If someone out there could provide a clear answer it wo

Answer 1

You can say, the node tree that hosts the shadow root is referred as the light tree which might be Light DOM or another Shadow DOM as well.

Check this note in the specification.

A shadow tree’s corresponding light tree can be a shadow tree itself.

Answer 2

The Light DOM is simply the plain old DOM tree inside a HTML element.

The term is only used in the context of web components to distinguish it from the Shadow DOM. I suppose the normal DOM was redefined as Light in contrast with Shadow.

The specs call it the shadowroot host's node tree, or light tree:

A shadow root is always attached to another node tree through its host. A shadow tree is therefore never alone. The node tree of a shadow root’s host is sometimes referred to as the light tree.

I call it the normal DOM :-)

---

The Shadow DOM is the added DOM that recovers, masks, or replaces the normal DOM, as explained in the article from Google.

The rendered DOM can be a combination of the Shadow DOM and the Light DOM (through <slot> elements)

Note: it's not possible to completely polyfill the Shadow DOM behaviour in JavaScript, so Shadow DOM polyfills actually deal with normal DOM trees only.