Learn the differences between Shadow DOM and Virtual DOM

Shadow Dom not Virtual Dom

Document Object Model

DOM - It’s a way of representing a structured document via objects. It is cross-platform and language-independent convention for representing and interacting with data in HTML, XML, and others. Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS.

Virtual DOM vs Shadow DOM

Vue.js and React both use Virtual DOM so it is a known concept by many but often it is confused with Shadow Dom. For this reason, an article about which problem Shadow DOM tries to solve and how it differs from Virtual DOM was created by @develoger, made available here.

Virtual DOM is any kind of representation of a real DOM. Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. It allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.

More precisely re-renders can and will quite heavily hit your hardware resources. Which will inevitably put your app performances into danger.

Shadow DOM is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.


This article was created and submited by @develoger.