Blog
Shadow DOM vs Virtual DOM
Update: Confused on what the Shadow DOM is? Be sure to check out this quick explanation before diving into this comparison.
The shadow DOM and virtual DOM are both fundamental to progressive web frameworks like Angular, Vue, and React. While the shadow DOM encapsulates the implementation of custom web components, the virtual DOM is used to differentiate changes and more effectively re-render UIs. In this article, we discuss the key differences between the virtual DOM and the shadow DOM.
What is the Virtual DOM
The virtual DOM is an in-memory representation of the real DOM. Popular UI libraries like React and Vue implement a virtual DOM to more efficiently re-render UI components based on a "diffing" process. By comparing changes between a virtual DOM and the real DOM, rendering engines can more efficiently determine what actually needs to be updated. This avoids unnecessary redrawing of DOM nodes as only elements that have changed are redrawn. Without the virtual DOM, every element is redrawn regardless of whether or not it has changed. This adds a huge performance boost to DOM manipulation since redrawing elements is an expensive process.
How the Virtual DOM works
While implementations of the virtual DOM vary, the overarching concept is the same. When elements are rendered, updates are made to the virtual DOM first. While it may sound expensive to update two versions of the DOM, it's more efficient because the virtual DOM doesn't actually do any redrawing on the page. Since the virtual DOM is essentially an in memory JavaScript object, making updates to it isn't as computationally expensive as re-rendering elements in the actual DOM.
After updates are made to the virtual DOM, it is then compared to the actual DOM through a process known as "diffing". This process allows the rendering engine to more accurately determine what's actually changed and minimizes the number of elements that are redrawn in the UI. Once the "diffing" process completes, the actual DOM makes the necessary updates and re-renders the elements that have changed.
In addition to avoiding unnecessary DOM changes, the virtual DOM also allows multiple changes to be applied at once. This provides an extra advantage since the UI doesn't need to re-render the page for every element that changes. All updates can happen in the same step.
What is the Shadow DOM?
The shadow DOM is a way of encapsulating the implementation of web components. Using the shadow DOM, you can hide the implementation details of a web component from the regular DOM tree. A popular example is the HTML5 slider input. While the regular DOM recognizes this as a simple <input/> tag, there is underlying HTML and CSS that make up the slide feature. This sub-tree of DOM nodes is hidden from the main DOM to encapsulate the implementation of the HTML5 slider. Additionally, the CSS properties for the slider are isolated from the rest of the DOM. This provides an isolated scope that prevents the component's styles from overriding other CSS properties defined elsewhere.
The isolated scope provided by the shadow DOM results in performance benefits. By isolating the CSS properties for a custom web component, the browser can more accurately determine what needs to be updated when the DOM is manipulated.
The Difference?
While the shadow DOM and virtual DOM are seemingly similar in their creation of separate DOM instances, they are fundamentally different. The virtual DOM creates an additional DOM. The shadow DOM simply hides implementation details and provides isolated scope for web components.
Conclusion
Both the shadow DOM and virtual DOM have played a key role in the development of progressive web frameworks. While both add performance benefits, the virtual DOM is used to efficiently redraw UIs whereas the shadow DOM encapsulates the implementation of custom web components.
