1

In the course of studying vue.js.

I learned shadow DOM in order to understand of fundamental Vue.js Component. I think shadow DOM is similar to virtual DOM. So, I tried to search many information different of shadow DOM and virtual DOM. But, It's too hard to find correct information that is the reason that I asking.

the reason that I think similar between shadow DOM and virtual DOM is those are created to solve current DOM structure problem.

Current DOM structure problem is hard to handle on a modern web application, such as SPA(Single Page Application), because modern web application environment generates a lot of nodes.

So, virtual DOM is created. it is an abstraction of DOM structure that is mean of 'we don't handle DOM structure directly'.

But, I think that is applied to shadow DOM too. so, I think that difference between virtual DOM and shadow DOM is shadow DOM is W3C standard and virtual DOM is react.js standard.

This opinion is only outlined in level of two techniques. I surely know those differences. Deep down, it's a completely different technology. shadow DOM has a template, decorator, custom-element, on the other hand, virtual DOM is operated using javascript object (for example, ReactElements).

I want to know my opinion is correct?

Yoni
  • 1,346
  • 3
  • 16
  • 38
Liquid.Bear
  • 333
  • 6
  • 21
  • 2
    Some of the answers here https://stackoverflow.com/questions/36012239/is-shadow-dom-fast-like-virtual-dom-in-react-js/36906251#36906251 seem to have some of the information you seek – Anthony May 17 '18 at 16:07
  • @Tony omg.. That didn't show up when I found that. Thank you!! – Liquid.Bear May 17 '18 at 16:08
  • This site is not for answers that elicit opinions...even your next to last paragraph, and your last sentence, indicate that's what you want. Try to rephrase this and I will retract my close vote. – Dexygen May 17 '18 at 16:15

1 Answers1

3

Virtual DOM is any kind of representation of a real DOM. Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. It allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.

Shadow DOM is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more- or-less complex DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.

https://vuejsfeed.com/blog/learn-the-differences-between-shadow-dom-and-virtual-dom

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Richard
  • 86
  • 5