React Virtual DOM vs Shadow DOM - Summary

React and Vue.js use virtual DOM to optimize performance. What is the shadow DOM then?

It is a bit like the differences between Java and JavaScript!

Virtual DOM

  • a copy of the entire real DOM and is implemented on top of browser APIs.
  • used by libraries like React and Vue to address the problem of changing the DOM while keeping optimal performances.
  • plain JavaScript apps don’t use the virtual DOM.

Shadow DOM

  • inherent in web components and browser APIs.
  • a piece of DOM that is “fenced” in its own web component.
  • might be used while using libraries like React and Vue, or frameworks like Angular.

More Info

This is a super short summary of a longer article that I published on Medium. You can find the article at React Virtual DOM vs Shadow DOM: What’s the Difference?

I am experimenting with this straight-to-the-point summary. Let me know what you think!