Is Shadow DOM fast like Virtual DOM in React.js?

Question

Does implementing Shadow DOM in my projects will make them faster like virtual DOM that\'s used by React?

Answer 1

No, Shadow DOM and Virtual DOM are unrelated, although somewhat similarly named:

Virtual DOM: React concept of keeping two copies of the DOM (the original, and the updated) for differential reasons. Before rendering, React diffs the two objects to determine if it should apply an update(s) to the actual DOM tree. This results in boosted performance, as we're only updating the portions of the view that require it, not the entire screen.

Shadow DOM: Part of the Web Components spec as proposed by W3C, which basically allows the encapsulation of smaller DOM elements and CSS styles into a single DOM element:

Example Shadow DOM Element

However, actually encapsulates the following elements:

   Play
   Pause
   

So by using Shadow DOM, we're able to hide the implementation details of our web element, and only pass along necessary information to the sub-elements (i.e. height, width), which, perhaps confusingly, strongly resembles the ReactJS idiom of passing props to components.

Information provided via:

• http://www.funnyant.com/reactjs-what-is-it/
• http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/