Three Types of DOMs Explained

I’m just starting to learn React and learning about the virtual DOM. I tried Google-ing around for best answers to the question of what exactly is the difference between the virtual DOM, the real DOM, and the shadow DOM. I couldn’t really find too much in one place.

So, I decided to do a dive into the exact differences between the virtual DOM, shadow DOM, and the real DOM myself. Let’s start with the basics.

1) The Real DOM

DOM is short for Document Object Model. “The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.”

(Document Object Model - Wikipedia)

Most web browsers use something similar to the DOM and organizes each document into a tree of nodes, “the DOM tree” (Document Object Model - Wikipedia).

For Javascript, which is what we will be focusing on in this writing, it represents the document that is loaded when the page is loaded, providing an “object-oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages”(Document Object Model - Wikipedia). JavaScript can CRUD (Create, Read, Update, Delete) any object on the page loaded in the DOM, as well as react to all the changes in the page loaded such as state changes.

An example of the DOM tree is below:

W3C “What is the Document Object Model?”

A Brief History Lesson on the DOM

The DOM was standardized by the World Wide Web Consortium with it’s last recommendation dating back to 2004 (Document Object Model - Wikipedia). The WHATWG has made the standard a living document and superceded the W3C standard recommended in 2004.

Problems with the DOM

It is really slow. The virtual DOM is a “really clever workaround to the DOM being slow.“(Learn Co. Curriculum - Virtual DOM) Due to increasingly dynamic web pages, we need to edit the DOM a lot, so this is a problem. (Difference between the Virtual DOM and the Real DOM)

2) The Virtual DOM

The “Virtual DOM is a technique employed by several front-end libraries and frameworks, most notably React. In a nutshell, virtual DOM builds a virtual representation of what our document should look like.” (Learn Co. Curriculum - Virtual DOM)

It provides performance gains for sites by not touching and changing the DOM super frequently, and “when we do, we do it with surgical precision.” (Learn Co. Curriculum - Virtual DOM).

It might be easier to think of the virtual DOM as an abstraction of the real DOM, “a local and simplified copy of the HTML(real) DOM”(Difference between the Virtual DOM and the Real DOM). It allows React to do its computations within this local and simplified copy of the real DOM without the DOM operations (slow and browser-specific — Difference between the Virtual DOM and the real DOM).

We’ve mentioned React, but what is React? How does it use the virtual DOM?

What is React?

React “is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.” (React Docs).

How is React different from just manually manipulating the real DOM?

“In a traditional JavaScript application, you need to look at what data changed and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via directives and data binding requires a linking function to manually update DOM nodes.

When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM.

The data returned from render is neither a string nor a DOM node — it’s a lightweight description of what the DOM should look like.”

(React Docs).

React breaks down building UIs into specific components.In other words, individual chunks of your application front-end can be represented by dedicated chunks of code that can change over time using a virtual DOM. In other words, ”[r]eact components are small, reusable pieces of code that return a React element to be rendered to the page.”

(React Docs - Glossary).

This means that instead of doing this:

lib.runApp(function(pageSet, allRows){
   // simulate updating model with server results, after a scroll
   pageSet.forEach(function(row){
       writeRow(row);
   });
});

We can do this:

lib.runApp(function(pageSet, allRows){
   // simulate updating model with server results, after a scroll
   _app.state.rows = allRows;
   _app.setState(_app.state);
});

Code snippet courtesy of “Comparing React.js Performance vs. native(real) DOM”

The virtual DOM “allows to [the real DOM to] collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.” Learn the differences between the shadow DOM and the virtual DOM.

Ok, great. So now you know what the real/native/HTML DOM is as well as what the virtual DOM is in React. This leads us to our next question.

3) The Shadow DOM

“Shadow DOM

Shadow dom is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. An entire web application of arbitrary complexity can be added to a page by an import and but also simpler reusable and composable components can be implemented as custom elements where the internal representation is hidden in the shadow DOM like .

Style encapsulation Shadow DOM is also about preventing styles being applied accidentally to elements the designer didn’t intend to, for example because the CSS or components library you are using changed a selector that now applies to other elements that use the same CSS class names. Styles added to components are scoped to that component and bleeding out or in of styles is prevented.

Shadow DOM and performance

Even though shadow DOM is not about performance in the first place it also has performance implications. Because styles are scoped, the browser can make assumptions about some changes to affect only a limited area of the page (the shadow DOM of a custom element) which can limit re-rendering to the area of such a component, instead of re-rendering the entire page.

This is the reason the >>>, /deep/, and ::shadow CSS combinators, which allowed to apply styles across shadow DOM boundaries, were deprecated and are subject to be removed soon from Chrome (other browsers never had them AFAIK). The mere existence of these combinators prevents the kind of optimization mentioned in the previous paragraph”

(“StackOverflow: Is shadow DOM fast like virtual DOM in React.js?”).

“Shadow DOM is a tool that helps us to overcome DOM encapsulation on the native level. It’s not only about CSS, it is about elements as well.” Shadow DOM != Virtual DOM.

“An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separate DOM to an element. This article covers the basics of Shadow DOM.”

( MDN - Using shadow DOM)

Where can you use the shadow DOM?

Here is the latest compatibility information:

Shadow DOM v1

Summary

DOM is short for Document Object Model, which represents the way the document is loaded in an object-oriented fashion.

Virtual DOM is a local copy of the DOM that can be edited in batches of changes and provides relief from the real DOM.

Shadow DOM is about encapsulation, not performance, and is only really compatible with certain browsers right now.

Acknowledgements and References:

Thank you to Learn.co and the Flatiron School who continuously encourage me to deepen my learning and play.

Learn the differences between the shadow DOM and the virtual DOM,Shadow DOM w3c Docs,Using Shadow DOM - MDN docs,Why React?,React - Glossary,"StackOverflow: Is shadow DOM fast like virtual DOM in React.js?",Learn the difference between the shadow DOM and the virtual DOM,Document Object Model - Wikipedia,Virtual DOM - Learn.co,Difference between the Virtual DOM and the Real DOM,"Comparing React.js Performance vs. native(real) DOM",W3C "What is the Document Object Model?"

Published 12 Jun 2018

founder && full stack && ethereum developer.
Max Goodman on Twitter