Does Angular 2 use Shadow DOM or a Virtual DOM?

Question

What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1?

Dar

Answer 1

update

Shadow DOM is now directly supported.

original

Angular2 doesn't use shadow DOM (default) nor virtual DOM.

With encapsulation: ViewEncapsulation.Emulated (default) there is no shadow DOM because style encapsulation is only emulated.

encapsulation: ViewEncapsulation.Native enables shadow DOM on browsers that support it natively or it's again emulated when the webcomponents polyfill is loaded.

Shadow DOM is also not targeting performance as virtual DOM is, but style encapsulation.

Angular2 doesn't use virtual DOM at all.

Angular2 has change detection that detects changes to the model and only updates the parts of the DOM that need to be changed according to the model changes.

For more details see also Is Shadow DOM fast like Virtual DOM in React.js?

Withdrawal

See what is Shadow DOM on the MDN site and ViewEncapsulation in the Angular Guide – Uprise

Just popping 'round to say the Angular 2 can use the Shadow DOM, it just doesn't by default: angular.io/guide/component-styles#view-encapsulation – Liatrice

@Liatrice thanks for the update. Glad to hear this finally became available. – Pepperandsalt

Update: encapsulation: ViewEncapsulation.Native is now deprecated since Angular 6.0.8, and is replaced by encapsulation: ViewEncapsulation.ShadowDom, refer to https://mcmap.net/q/371869/-viewencapsulation-shadowdom-vs-viewencapsulation-native and github.com/angular/angular-cli/issues/11526 – Pyrethrum

Answer 2

React and Vue are using Virtual DOM and Angular use direct DOM rendering system.

It's the same thing that Angular did with version 1.x, but it is optimized and there is a surprise for you :)

It is much faster to work with JavaScript objects than with DOM, because nothing drown on screen

Randalrandall

Angular does actually use Shadow DOM – Justifiable

Answer 3

Angular 2 and the version came after doesn't use Virtual DOM instead it uses change detection mechanism to detect any change and act upon it while React and Vue uses Virtual DOM to compare with the Real DOM to detect any change occurred.

On the other hand in some way Angular does uses Shadow DOM in encapsulation to keep the markup structure, style, and behaviour hidden and separate from other code or components on the page so that different parts do not clash. you can learn more about encapsulation here.

And the last part there is no such concept of Virtual DOM and Shadow DOM used in Angular 1 or AngularJS.

Cia