logo

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.