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:

@Component({
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.