React & Vue Virtual DOM vs Shadow DOM - Summary

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!