HTML, DOM, Shadow DOM and Virtual DOM
HTML, DOM, Shadow DOM, and Virtual DOM are not synonyms. But they are closely related.
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 🙏