Menu
What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1?
472
Angular uses the browser's built-in Shadow DOM API to enclose the component's view inside a ShadowRoot (used as the component's host element) and apply the provided styles in an isolated manner. ViewEncapsulation.
Angular doesn't have Virtual DOM, it uses its own mechanism for Change Detection combined with Zones, which helps Angular going through the Change Detection tree from its root to its leaves.
Angular Ivy is a new Angular renderer, which is radically different from anything we have seen in mainstream frameworks, because it uses incremental DOM.
A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue. js, and Elm.
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?
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
