As most of you know DOM refers to DOCUMENT OBJECT MODEL which is nothing but the Nested Tree structure of the HTML / XML code.
→ Each node in the tree is an Object representing HTML elements.
The workflow of Web Browers
→ DOM tree itself is constructed by the rendering engines.
→ Now the CSS is applied to HTML creating the render tree.
→ Now the render tree is painted in the browser.
Now Updating this tree becomes Expensive, to overcome this frameworks like React, Vue, Angular, etc uses Virtual DOM.
→ Instead of changing all the changes to the real DOM first, these are applied to the virtual DOM.
→ virtual DOM is not rendered directly, It is stored in the memory of the framework used.
→ virtual DOM is a lightweight representation of real DOM.
How Virtual DOM Works
→ The changes made first updates the virtual DOM where now the differences between both real DOM and virtual DOM are rendered in the real DOM.
→ It does render everything so virtual DOM is fast and efficient
→ Shadow DOM allows creating the Custom Components.
→ It allows a component to have it's very own “shadow” DOM tree, that can’t be accidentally accessed from the main document, may have local style rules, and more.
→ To inspect the shadow dom code in Chrome
Settings → Elements → (check) Show user agent shadow DOM
→ Have their own ids space,
→ Use styles only from the shadow tree, not from the main document.