UI Development

Understanding Virtual DOM and Shadow DOM

Introduction

In a progressive web application, we have two essential concepts. They are Virtual DOM and Shadow DOM. Nowadays, Shadow DOM and Virtual DOM are heard more often, with many progressive web frameworks like  Vue.js, AngularJs, React.js implementing these two vital concepts of the DOM. More often than not, there always seems to be a bit of uncertainty between these two types of DOM.
According to Mozilla, Shadow DOM is a not a full standalone document. It’s an isolated and a lite version of the original DOM. On the other hand, the information needed to create a DOM is contained in an object called Virtual-DOM, which is implemented by libraries in JavaScript.
Before going deep into the topics, let’s have a glance at how DOM works.

DOM

The DOM is basically an API for HTML and XML documents where it logically creates a structure that can be accessed and manipulated by the browser with the help of javascript.

By DOM manipulations, we can add, delete and modify the behavior of the element.

Generally, by using a window object we can find many properties and methods to interact with the DOM elements.

Virtual DOM:

Rather than working with DOM directly, we work with the abstract version of it i.e., by using the lightweight copy of the DOM and we can change it as we want and then send it to the real DOM.

By using this method, the re-rendering on the original DOM can be reduced as it will increase the performance.

We need to check whether the data is changed or not, if it is changed, it needs to be updated. This can be done by using the following two methods:

  • Dirty checking: Checking the Data at regular intervals and structuring it in a recursive manner.
  • Observational: If any states are changed then we need to update the DOM

 

Three things that make the Virtual DOM work fastly are

  • Effective diff algorithm.
  • Batching DOM read/write operation.
  • Effective Updating of sub-tree only.

Pros:

  • The update process is optimized and accelerated.
  • JSX makes components/blocks code readable.
  • Virtual DOM is ideal for mobile-first applications. Prompt rendering.

Cons:

  • Full in-memory copy of the DOM.
  • No difference between static and dynamic elements.

Shadow DOM

Shadow DOM refers to a local DOM tree of  DOM element into the rendering document, but not into the main document of the DOM tree. The difference between Real DOM and Shadow Dom is how it is created and behaves.

Real DOM nodes are created in a tree-like structure which was explained above. Whereas, in the Shadow DOM which is created as a scoped tree connected to an element and that element is known as Shadow HOST and the root element of the Shadow Tree is called Shadow root. In this way, we can also hide the implementation details of a web component from the regular DOM.

Example

This is how the Shadow Dom is created in the browser.

Pros:

  • It is isolated from the DOM, So it won’t appear in the global DOM.
  • Scoping of the CSS, which means styles are created inside the single shadow DOM element.
  • The application is built from the chunks(Component-based).
  • It solves the problems of encapsulation.

Cons:

  • No cross-browser compatibility.
  • If we are using traditional CSS frameworks like Bootstrap, Pure, etc. it just won’t work if your components are using Shadow DOM because the styling will not reflect in the components.

Difference between Shadow DOM and Virtual DOM

While the shadow DOM and virtual DOM are similar in their creation of separate DOM instances, they are fundamentally different. The virtual DOM creates an additional DOM. The shadow DOM simply hides implementation details and provides an isolated scope for web components. And both of them help us to increase the performance.

Conclusion

DOM concept is very important in front-end programming, but with the development of technology and new libraries, improvements come to Document Object Model as well. With progressive web frameworks, we can use Shadow DOM and Virtual DOM to avoid issues with performance and modify the DOM faster and more efficiently.

About The Author