web component - 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 would be much appreciated.

Answer 1

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.