Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the difference between ShadowDOM and VirtualDOM ?

  • Last Updated : 13 Jul, 2021

The Document Object Model (DOM) is a popular concept followed in client-side development. It’s a fundamental technique that is both cross-platform and language-independent. It is defined as an API for HTML or XML documents that create a logically structured document through objects.

Virtual DOM:

  • Virtual DOM, in simple terms, is nothing but the complete and full representation of an actual DOM.
  • Since any changes to the DOM causes the page to re-render more often than not, Virtual DOM primarily attempts to avoid any unnecessary and expensive changes to the DOM.
  • This is achieved by grouping changes and doing a single re-render instead of several small ones.
  • A copy of the DOM is saved in the memory and is used to compare any changes being done anywhere in the DOM, it’s compared to find differences. Thus, only those parts of the application are re-rendered which are updated instead of re-rendering the entire DOM.
  • VueJS and ReactJS both use Virtual DOM.

Shadow DOM:

  • Shadow DOM, on the other hand, relates mostly to the concept of encapsulation. It is a tool that allows developers to overcome DOM encapsulation.
  • It 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.
  • Contrary to the DOM, Shadow DOM occurs in smaller pieces, implying that (unlike the Virtual DOM) it is not a complete representation of the entire DOM.
  • It is also proven to be helpful with CSS scoping. The styles used in an application can overlap which makes it cumbersome to handle them. Shadow DOM ensures that the styles created inside a single Shadow DOM element remain isolated and within their own scope.

Differences between ShadowDOM and VirtualDOM

                                 Virtual DOM                                                       Shadow DOM
It revolves around solving performance issues.It revolves around the concept of encapsulation.
It is a complete representation of an actual DOM.It is not a complete representation of the entire DOM.
It groups together several changes and does a single re-render instead of many small ones.It adds a subtree of DOM elements into the rendering of a document, instead of adding it to the main document’s DOM tree.
It creates a copy of the whole DOM object.It creates small pieces of the DOM object having their own, isolated scope.
It does not isolate the DOM.It isolates the DOM.
It does not help with CSS scoping.It helps with CSS scoping.
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!