Learn the differences between Shadow DOM and Virtual DOM

Learn the differences between Shadow DOM and Virtual DOM →  #VueJS #reactjs

  • 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 about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page.
  • Shadow DOM is mostly about encapsulation of the implementation.
  • 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.

Virtual DOM is a feature of Vue.js and other major frameworks but often there is some confusion between Virtual and not, so some clarification is needed

@peterdierx: Learn the differences between Shadow DOM and Virtual DOM → #VueJS #reactjs

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.

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.

VDOM

This article was created and submited by @develoger.

Have you created or seen something awesome related to Vue.js? Submit it here to share it with the community of Vue.js!

Learn the differences between Shadow DOM and Virtual DOM