Angular 6.1 – ViewEncapsulation.ShadowDom

Angular version 6.1 was released last week. It is a minor release so you can go ahead an use it as a drop-in replacement for 6.0.

Apart from bug fixes and performance tweaks there a three new features



ShadowDOM v1 View Encapsulation

View encapsulation is what allows us to define a style within a component and for that style to only affect that component. Sweet.

You specify a view encapsulation type in component metadata. Like this:

selector: 'app-payment',
templateUrl: './app-payment.component.html',
encapsulation: ViewEncapsulation.ShadowDom
export class MyPayment implements OnInit {

The ViewEncapulation values are:

  • Emulated (default)
  • Native (ShadowDOM v0)
  • None

Angular 6.1 introduced a new value: ShadowDom (shadow DOM v1)

ShadowDom” is more compatible with the ShadowDOM spec and will eventually replace “Native“.

Do not use “Native” going forward. It has been deprecated and will be removed in a future release.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.