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!
Top comments (0)