Does Angular 2 use Shadow DOM or a Virtual DOM?

angular shadow-dom virtual-dom
Shivanka picture Shivanka · Sep 28, 2016 · Viewed 31.6k times · Source

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

Answer

Günter Zöchbauer picture Günter Zöchbauer · Sep 28, 2016

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?

Related questions

Style html,body from web component (Angular 2)

I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page. But just adding a style for the html, body in my login.…

Read More
Render content between the component tags

When a component is rendered, content inside it is ignored, for example: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<div>{{title}}</div>', }) export class AppComponent { title = 'app works!'; } Using it …

Read More
What does :host /deep/ selector mean?

Please explain in a straightforward way what :host /deep/ means: :host /deep/ .ui-autocomplete { width: 85%; }

Read More