GIMTEC By Llorenç Muntaner - HTML, DOM, Shadow DOM and Virtual DOM

Hey 👋,

Hello to all new subscribers! Thanks for joining.

Today's article is short and sweet that you might have wondered about at some point in your professional life.

I hope it sheds some light in case the difference between those topics is blurry for you.

-----------------------------

Same, Same?

As you probably have guessed: no, those words are not synonyms. Yet, they are all tightly related. So, where does one start and the other end? If you wondered about this, keep reading.

Definitions

We’ll start with an official definition for each:

HTML

“HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.” MDN

DOM

“The Document Object Model is the data representation of the objects that comprise the structure and content of a document on the web.” MDN

Shadow DOM

“Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.” What The Heck Is Shadow DOM

Virtual DOM

“The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library.” React Docs

Questions

All clear now? Definitions are enough, right? In case they aren’t, let’s answer a few questions.

Is X a programming language?

HTML: No, a markup language is not a programming language. Markup languages are only about data representation, not about instructions.

DOM: No, but it’s implemented in a programming language (JavaScript). Think of it as a standard library added to all the browsers.

Shadow DOM: No, but it’s also implemented in JavaScript but not in all browsers.

Virtual DOM: No. It’s more of a data structure implemented in JavaScript. Think of it as a list, hashmap, or b-tree.

Is X a library?

HTML: No, definitely not a library.

DOM: No, but we use it similarly to a library. It just happens to be implemented in all the browsers.

Shadow DOM: No. Same as the DOM, but not all the browsers support it.

Virtual DOM: Not directly, but it’s inside a library. For example: React, VueJS or Preact use a Virtual DOM.

Is X in all browsers?

HTML: Yes, HTML can be read by all browsers.

DOM: Yes, all browsers offer a DOM.

Shadow DOM: No, some browsers don’t support it. Full support table in caniuse.

Virtual DOM: No, this is not related to browsers.

How Old Is X?

HTML: 1990. “Berners-Lee specified HTML and wrote the browser and server software in late 1990.” Wikipedia.

DOM: Late 1990s. “The history of the Document Object Model is intertwined with the history of the browser wars of the late 1990s between Netscape Navigator and Microsoft Internet Explorer.” Wikipedia.

Shadow DOM: 2011. “Web Components were introduced by Alex Russell at Fronteers Conference 2011 for the first time.” Wikipedia.

Virtual DOM: 2011. The first to implement a Virtual DOM was React, and it was first deployed on Facebook in 2011. Wikipedia.

Common Misconceptions

HTML and DOM Are the Same

HTML is a markup language used to represent data in a file. The HTML file is parsed in the browser, creating the DOM.

Initially, the DOM matches the representation of the HTML file. Yet, when JavaScript starts manipulating the DOM, they start to differ.

DOM and Virtual DOM Are the Same

The DOM lives in the browsers. Virtual DOM lives inside the library code (React or VueJS). Developers have direct access to the DOM, whereas the Virtual DOM is more of an implementation detail of how the library works. Therefore, the Virtual DOM is not easily accessible to developers.

The Shadow DOM Is Like an Iframe

A developer can choose to use one or the other for the same use case, but not all use cases can be solved with both.

For example, the page must be published elsewhere to use an iframe. Or, if the parent page requires access to the inner data of the iframe, it’s not easily done.

I recommend reading this article for more on this topic.

Not the Same

HTML, DOM, Shadow DOM, and Virtual DOM are not synonyms. But they are closely related.

If you like this post, consider sharing it with your friends on twitter or forwarding this email to them 🙈

Don't hesitate to reach out to me if you have any questions or see an error. I highly appreciate it.

And thanks to Michal and Miquel for reviewing this article 🙏