DOM vs Virtual DOM vs Shadow DOM

TL;DR

• "real" DOM: represents what you see on your screen; One page have one single DOM; any change will make a rerending of the whole object.
• Virtual DOM and Shadow DOM are trying to resolve the performance issue in different ways:
  • Virtual DOM is creating a copy of the whole DOM object and keep it in memory to track changes
  • Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.
• Examples: React.js uses Virtual DOM; Lit (based on Web Components) uses Shadow DOM; Solid.js uses real DOM.

DOM

• the browser parses the HTML to a tree-like structure; each tree node is an object.
• JavaScript can access and do changes in the DOM. window.document.
• The whole page is a single big DOM tree. Performance issue: Every change will make a re-rendering of the whole object.

Virtual DOM

• Defined and managed by React, to mirror the real DOM (It saves a copy of DOM in memory)
• faster to chagne; changes to the states will first be applied to Virtual DOM; only if it requires UI Changes, ReactDOM will then update the real DOM.

Shadow DOM

• comes in small pieces; it does not represent the whole DOM, only sub-trees.
• Shadow DOM creates a scoped tree that connects to an element; the element is called shadow host.
• everything added to Shadow DOM is local (including styles).
• Benefits:
  • it isolates the DOM, the component is a separate element that does not appear in the DOM.
  • it simplifies styling: styles created in a single Shadow DOM element is isolated.
• An application using Shadow DOM is not one single big tree, but built on components.