Menu
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.
241
With shadow DOM, CSS styles defined in a parent component don't apply to a child component. Contrastingly, light DOM enables styling from the root document to target a DOM node and style it. The styles on the following native shadow component cascades into the child component's light DOM.
In short, the shadow DOM is a browser technology whose main objective is to provide encapsulation when creating elements. On the other hand, the virtual DOM is managed by JavaScript libraries—e.g., React—and it's mostly a strategy to optimize performance.
Is the Shadow DOM the same as the Virtual DOM? No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.
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.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
