DOMs Decoded: DOM, Shadow DOM & Virtual DOM
Tags: webdev, javascript, html, react
Published: 2021-11-14 04:46:56

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0db79cxn06mnrswrn1uf.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8uypmh57ask3ro53l73.gif)

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

```html
<!-- part of the html body -->
<div id="root"></div>
```

```js
// 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); 
```

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv8zlclk4uypfph6u48w.PNG)

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

```html
<ion-button>Default</ion-button>
```

when rendered by the browser (on **iOS**) becomes:

```html
<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>
```

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

![Iconic Shadow Dom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lu8k6nwjm1071yv31w7.PNG)

# 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:

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

Gets converted to simple **JavaScript** using transpilers like **Babel**:

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

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**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer**? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**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](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

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**

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)