Learn the differences between Shadow DOM and Virtual DOM
Shadow Dom not Virtual Dom
Document Object Model
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.