DOM vs Shadow DOM vs Virtual DOM

Swaroop Nadella
1 min readNov 6, 2023
DOM structure — Image credits:

The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents.

It defines the logical structure of documents and the way a document is accessed and manipulated.

Shadow DOM refers to the browser’s potential to add a subtree of DOM elements into the rendering of a document, but not into the DOM tree of the main document.

Thus, it isolates the DOM and ensures that the DOM of a component is a separate element that won’t appear in a global DOM.

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Swaroop Nadella
Test Automation Engineer, Tech Educator

Subscribe here, to Get an email whenever I publish article on Medium.

Swaroop Nadella Academy Store — Quizzes and Courses