Practice
Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components . Virtual DOM is a concept implemented in JavaScript libraries on top of browser APIs.
React JS is a JavaScript library developed at Facebook for building user interfaces, which popularised the idea of using a virtual DOM. React builds a lightweight tree of JavaScript objects to mimic the DOM tree. It then generates HTML from them, which is inserted into or appended to the required DOM element, causing the browser to repaint the page.
Beginners often confuse the DOM with what they write as the HTML structure of their website or application. But HTML becomes the DOM after the browser parses it, and only then does it become the DOM. The definition says that the DOM is an API for HTML or XML documents, and that it creates a logical structure that can be accessed and manipulated. In other words, JavaScript can access and make changes to the Document Object Model. The reason the Document Object Model was implemented was to provide a standard programming interface that could be used with any programming language in a variety of environments. By modifying the DOM we can mean adding, removing or changing elements of a website, assigning different behaviour to them, and so on. Every browser has its own global object called window. Inside window there are various properties and methods. One of the properties of the window object is document, in which we can find many properties and methods that can be used to access DOM elements in order to interact with them. A graphical representation of the DOM looks like the example below:
As you can see, it is built as a tree. It starts with the main document object, then the html object is created, and the html element leads to the head and the body, and so on. Each of the objects represents an HTML element of the website as an object with properties, attributes and methods that allow it to be modified.
The Shadow DOM is a tool used to build component-based applications and websites.
The Shadow DOM is also a W3C working draft standard. The specification describes a method of combining several DOM trees into a single hierarchy and how those trees interact with each other within a document, which allows the DOM to be composed better.
The Shadow DOM consists of small parts and does not represent the whole Document Object Model. We can think of it as a subtree, or as a separate DOM for an element. The Shadow DOM can be pictured as the bricks the DOM is built from. The main difference between the DOM and the Shadow DOM lies in how it is created and how it behaves. Usually the DOM nodes we create are placed inside other elements, as in the tree we saw earlier. In the case of the Shadow DOM, we create a scoped tree that is bound to an element but separated from its children. This is called the shadow tree, and the element it is attached to is called the shadow host. And here we come to the great advantage of the Shadow DOM: everything we add to the Shadow DOM is local, even styles. Let us explain why the Shadow DOM is so useful and which problems it solves. First of all, it isolates the DOM, so a component's DOM is a separate element that will not show up in the global DOM. Another problem it helps with is scoping CSS, which means that styles created inside a single Shadow DOM element are isolated and stay within that Shadow DOM. This makes styling far simpler, because we do not have to worry much about namespaces, and we can use simple selectors and class names. Besides, we can think of the application as being built out of blocks (it is in fact component-based) rather than as one massive global object. The Shadow DOM can affect the performance of an application. As was said at the beginning of the article, there are many performance problems as long as we want to manipulate the DOM, because every change causes the entire object to be re-rendered. In the case of the Shadow DOM, the browser knows which part needs to be updated.
The Virtual DOM is a DOM concept used by React.js and Vue.js. In the virtual DOM concept a copy of the DOM is kept in memory, and although any changes are made to the DOM, it is compared in order to find the differences. The browser then knows which elements were changed and can update only that part of the application, in order to avoid re-rendering the whole DOM. This is done to improve the performance of user interface libraries. As we know from the previous paragraph, in the DOM every element is re-rendered, regardless of whether it was changed or not. Let us look in detail at how the Virtual DOM works, step by step. So, first the changes are made, and this is done on the virtual DOM rather than on the original DOM; then the virtual DOM is compared with the Document Object Model, and this process is called "diffing". Once the differences are found, the browser knows which elements in the original DOM should be updated, and the update is performed. In the Virtual DOM concept more than one change can be applied at once, in order to avoid re-rendering for every individual element change. The biggest problem the Virtual DOM solves is improving performance when manipulating the DOM.
The only thing they have in common is that they both help with performance problems. Both create a separate instance of the Document Object Model; apart from that, the two concepts are different. The Virtual DOM creates a copy of the whole DOM object, whereas the Shadow DOM creates small parts of the DOM object that have their own isolated scope for the element they represent.
The concept of the DOM is very important in front-end programming, but as technology and new libraries have developed, improvements have reached the Document Object Model too. Thanks to progressive web frameworks we can use the Shadow DOM and the Virtual DOM to avoid performance problems and to modify the DOM faster and more efficiently. Now it is no longer a cause for concern how to interact with the DOM object so as not to spoil performance, since help has arrived along with the development of technology. I hope this article helps you understand what the DOM is and how the Virtual and Shadow DOM concepts work. I have also explained the main differences between them and the problems they solved. Happy coding!
Comments