ShadowDOM Vs VirtualDOM

ShadowDOM is the concept that refers to the encapsulation of DOM elements and components while VIrtualDOM is virtual representation of DOM that optimizes the Updates to the RealDOM.

What is the DOM?

Before understanding Virtual DOM and Shadow DOM, you need to know what DOM (Document Object Model) is:

• 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 cause 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