DEV Community

Cover image for DOMs Decoded: DOM, Shadow DOM & Virtual DOM
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

DOMs Decoded: DOM, Shadow DOM & Virtual DOM

The Document Object Model (DOM) is one of the fundamental concepts of web development, but it is often difficult for beginners to grasp. With the introduction of additional DOM entities like the Virtual DOM and the Shadow DOM, people find themselves scratching their heads trying to decipher what they are.

head scratch

Today we are going to fix that. After reading this article, you will be able to hold a conversation on these topics like a pro

DOM

Let's first take a look at the definition before proceeding to learn about the DOM. The definition says:

DOM is an API for HTML or XML documents and it creates a logical structure which can be accessed and manipulated.

Web browsers create the DOM by parsing the HTML document, so we can interact with it using JavaScript and select & style elements with CSS.

This is what a DOM typically looks like:

DOM Structure

We also mentioned that we can interact with the DOM using JavaScript. Let's take a look at how its done:

<!-- part of the html body -->
<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
// getting access to the element (DOM node)
const rootElement = document.querySelector("#root");

// now you can modify the element as you please
// modifying style
rootElement.style.color = "red";
// adding children
const paragraph = document.createElement("p");
const text = document.createTextNode("This is a paragraph.");
paragraph.appendChild(text);
rootElement.appendChild(paragraph); 
Enter fullscreen mode Exit fullscreen mode

Shadow DOM

First off, the definition obviously:

The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.

The Shadow DOM can be thought of as a layer that allows the developer to insert a nested DOM. The following picture perfectly sums it up:

Shadow DOM

One of the well known framework that extensively uses Shadow DOM is Ionic. The following Ionic Component:

<ion-button>Default</ion-button>
Enter fullscreen mode Exit fullscreen mode

when rendered by the browser (on iOS) becomes:

<ion-button size="small" class="ios button button-small button-solid ion-activatable ion-focusable hydrated">
    <button type="button" class="button-native" part="native"><span class="button-inner"><slot name="icon-only"></slot><slot name="start"></slot><slot></slot><slot name="end"></slot></span></button>
    Default
</ion-button>
Enter fullscreen mode Exit fullscreen mode

You can use Chrome Dev Tools to dive into the Shadow DOM of the different components:

Iconic Shadow Dom

Virtual DOM

Let's see how Google describes the Virtual DOM:

A virtual DOM is a lightweight JavaScript representation of the DOM used in declarative web frameworks such as React, Vue.js, and Elm.

DOM operations might be really powerful, it comes at a huge cost. It's one of the slowest operations in the world of web dev. To reduce the number of DOM operations, we use the Virtual DOM to modify the DOM if it really requires any modification and not every time something changes.

Let's demonstrate with a React-based example. The JSX we use to write React apps:

// demo jsx
<div style={{ color: "red" }}>
    <h1>Hello world!</h1>
    <p>Some random text</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Gets converted to simple JavaScript using transpilers like Babel:

React.createElement(
  "div",
  { style: { color: "red" } },
  React.createElement(
    "h1",
    null,
    "Hello world!"
  ),
  React.createElement(
    "p",
    null,
    "Some random text"
  )
);
Enter fullscreen mode Exit fullscreen mode

The React Virtual DOM is just an object representation of the DOM.

Why does React store an additional copy of the DOM? you might ask.

Well, updating JavaScript objects are far faster than repainting the DOM. As mentioned previously, the Virtual DOM calculates the change in data and only triggers a DOM re-render when required, thus providing a huge performance boost

Wrapping Up

In this article, we went over the DOM, Shadow DOM & Virtual DOM. Hope this helps you in your development journey!

Happy Developing!

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  3. Would you like to collaborate on our site?

    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Oldest comments (10)

Collapse
 
ksengine profile image
Kavindu Santhusa • Edited

Why browsers can't implement the part of shadow DOM?

If we can reduce heavy DOM updates using JS, then browsers can better reduce because they are written using with compiled languages.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

I didn't get what you were asking. Shadow dom isn't a dom, it's a technique to nest a dom in another

And regarding the dom updates, I did mention that part in the virtual dom (dom updates are one of the slowest operations in web dev)

Collapse
 
ksengine profile image
Kavindu Santhusa

Very sorry. It's a mistake. It should be virtual DOM.

Why browsers can't implement the part of virtual DOM?

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

That's a very good question. I didn't have an answer to it, so I looked up Google. The general theme I found can be summed up by this comment:

If you follow the JS world - it was pretty much the same with Promises - we got the bluebird and jQuery implementations, but at the end Promises went native and all those libraries and frameworks are no longer needed.

People were saying that browsers would slowly start using the virtual dom, but I am not entirely sure when it would happen as it has been years since the concept of virtual dom was introduced

Thread Thread
 
ksengine profile image
Kavindu Santhusa

Thanks for the answer for burning question,

It's irrelevant to JS world. As this feature could improve performance of browsers, It's an optimization to browsers. So relevant to the world of rendering engines.

First Promises are added to the JS spec, So browsers should implement that, But virtual DOM can be added to any browser individually.

Thread Thread
 
ksengine profile image
Kavindu Santhusa

I thought to create a JavaScript framework without virtual DOM.

Nowdays computers are more powerful. Real DOM is enough if developers are using it with a responsibility.

I am looking for collaborators for it. I you can please contact me via ksengine.github@gmail.com.

If this comment looks spammy, I am sorry. You can inform me and I'll delete this.

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

No worries, you can keep it

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Totally incorrect explanation of what Virtual DOM is.

Virtual DOM still has to update the DOM. So for an exact same DOM update React (or any framework) is slower than native JavaScript updating the DOM.

Facebook made React use Virtual DOM because it had stupid developers that kept updating the DOM parts that never changed.
Virtual DOM is all about changing only the parts that need changing.

So if you are a smart developer (any developer smart enough to not use React) you can update only the DOM parts that need to change yourself... and faster than any Framework can.

Virtual DOM shields stupid developers from shooting themselves in the foot because they don't master native code.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I think you should try re-reading the virtual dom section.

Collapse
 
barucalmaguer profile image
Baruc

Lol so much ignorance and hate.

React selling point is declarativeness and allowing to structure your code as Components.

It just happens to use a virtual DOM, but other declarative libraries like Svelte don't require a virtual DOM, and their selling point is the same.

If you are going to talk with that authority at least be correct in what you are saying, the post explained it right