CODEWITHSUNDEEP
angulardomshadow-dom
CrazySynthax
CrazySynthax

Reputation: 14988

Angular: Why should I use 'encapsulation: ViewEncapsulation.Native'?

In Angular, the default mode is encapsulation: ViewEncapsulation.Emulated

This mode enables styles encapsulation by using CSS selectors. However, 'encapsulation: ViewEncapsulation.Native' also implements style encapsulation, but with another technique, shadow DOM. Whereas the technique is different, the result is the same.

If so, why should I use "ViewEncapsulation.Native"? What do I get in this mode that I don't get in "ViewEncapsulation.Emulated" ?

Upvotes: 3

Views: 1083

Answers (1)

Supersharp
Supersharp

Reputation: 31171

With "Native" encapsulation you get all the features provided by the new Shadow DOM specification.

This blog article explains the differences between the different modes in Angular2.

Because Emulated mimics the Native mode, you'll get all the features that can be emulated.

What cannot be emulated is real CSS encapsulation (a rule with an !important directive could be applied to your Emulated component), and scoped selection (with the help of querySelector()).

With the Native mode, rendering should be faster (because it is... native!).

Upvotes: 3

Related Questions