Understanding Shadow and Virtual DOM

Table of contents

Reading Time: 4 minutes

In this blog we will understand what is shadow and Virtual DOM that is being used now a days by two famous frontend tools angular and react respectively.

To understand these two first we need to understand what is DOM. So, we will divide the whole blog into 3 parts –

DOM
Shadow DOM.
Virtual DOM.

Understanding DOM

Let us take a simple example of the first html page every frontend developer creates at the start of his/her learning –

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>FirstPage</title>
</head>
<body>
    <h1>
        Hello World!!
    </h1>
</body>
</html>

Output:

So the question comes here is how does browser is able to render it in the form of the page instead we just written some text and saved the file with .html extension. Browser achieves this with the help of DOM API i.e., Document Object Model API.

DOM is in-memory representation of our HTML in the form of objects so the DOM makes the node tree format:

We can multiple items of our HTML represented as nodes.

Now, if open our console and type document and hit enter we get the powered document object inside the document, we have the head, body, inside the body we have h1.

In the same manner we can access have access to other elements of our document object:

document.body // It will print the elements inside our body tag
document.head // It will print the elements inside our head tag

Likewise we can access other elements of our DOM and can manupulate them according to use. We have different methods to access the elements inside our DOM. You can learn all these methods here.

Understanding shadow DOM

Shadom DOM is relatively new DOM feature that allows us to create custom tags or components. Lets learn this with example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>FirstPage</title>
</head>
<body>
    <video>
        <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
    </video>
</body>
</html>

Output:

We have just added the video tag and source tag, so how these play pause button, speaker button inside the video are coming from?

These things are coming from shadow DOM. Video and source tag are the custom tags that created inside the shadow DOM. By default chrome doesn’t show the shadow DOM by default but we can enable this by

Opening Inspect element > Click on Setting icon > Inside Elements > Check show user agent shadow DOM

Now we can see all the things that are defined inside our shadow DOM for video and source tags.

NOTE: Shadow DOM is supported by almost all the broswers except IE-11 where we can use pollyfills to make it work. Here is the link to github repository.

Understanding Virtual DOM

Virtual DOM is a abstraction on top of the actual DOM where an ideal or virtual, representation of a UI is kept in memory and synced with the real DOM with the help of the libraries such as reactDOM. This process of synchronisation is known as reconciliation.

It is also browser independent DOM system. It is used for performance and cross browser compatability.

When making a dynamic and interactive web application we need the elements or styling to change on user interaction. To change them directly into the DOM is really very heavy and it will slow down our app. So in that case we use Virtual DOM and make the changes and apply them to the actual DOM when required.
Whenever there is a update in the virtual DOM, react compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM.

Lets take a example having initial HTML in DOM is –

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h1>Hello React 2</h1>
         </div>
</section>

Updated DOM is –

<section>
         <div>
               <h1>Hello React</h1>
         </div>
         <div>
               <h1>Hello React 5</h1>
         </div>
</section>

In the above case react compares the both the snapshots and just finds that only one thing is changed so it just updates that thing in the DOM. In this way it saves our time.

Conclusion –

So, In this blog we have learnt about DOM that is stands for Document Object Model which is in memory representation of HTML and through browser it is able to render our HTML. We have also learnt about shadow DOM and Virtual DOM, Shadom DOM is new DOM feature that allows us to create custom tags and use them as required where as Virtual DOM works in way that it takes the snapshot of the current code in virtual DOM and compare it with the snapshot taken just before the changes and only changes the elements or tags added to the actual DOM.