What is the difference between Shadow DOM, Virtual DOM, and regular DOM?

DOM (Document Object Model) is an API for HTML and XML documents. It represents a tree of nodes, where each node corresponds to an element, attribute, or text fragment of the document. It is used for accessing and manipulating the structure, styles, and content of web pages. Direct manipulations with the DOM can be slow due to the need to recalculate styles, layout, and repaint.

Virtual DOM is a concept used in frameworks like React or Vue. It is a representation of the DOM tree stored in memory. When component data changes, the framework creates a new virtual DOM tree. It then compares it with the previous virtual tree (diffing) and determines the minimal set of changes needed to update the real DOM. This helps optimize page updates by minimizing costly operations on the real DOM.

Shadow DOM is a web standard that allows encapsulating a component's structure, styles, and behavior. It creates a hidden "shadow" DOM tree attached to an element in the regular DOM (host element). The Shadow DOM content is isolated from the rest of the document: styles inside it do not affect the outside world, and vice versa. This is useful for creating reusable, isolated components, such as <video> or <input type="range">.

Main differences:

Characteristic	Regular DOM	Virtual DOM	Shadow DOM
Representation	Actual document tree API	Lightweight in-memory DOM tree	Encapsulated DOM subtree
Purpose	API for accessing and modifying the document	DOM update optimization	Component encapsulation
Manipulations	Direct	Indirect (via diffing versions)	Direct, but only inside the "shadow"
Style isolation	No	No (unless using CSS-in-JS or modules)	Yes
Standard	Part of the web platform	Framework concept	Part of the web platform