Skip to content Skip to sidebar Skip to footer
Home / Angular / Javascript / Shadow Dom / Typescript

Angular 2 Native View Encapsulation

Post a Comment
There is already an answered question that explains the difference between ViewEncapsulation.Emulated, ViewEncapsulation.Native ad ViewEncapsulation.None. Let's say there is Electr

Solution 1:

According to https://github.com/angular/angular/pull/7883 this should work

import {CompilerConfig} from '@angular/compiler';

bootstrap(AppComponent, [{
  provide: CompilerConfig,
  useValue: new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Native})
}])

I haven't tried it myself yet though.

I guess ViewEncapsulation.Native will be mostly beneficial where one targets Chrome only. It seems it will still take quite some time until other browsers release their shadow DOM support.

The main benefit is that Angular2 doesn't need to add attributes to each component element and that not all component styles need to be added to <head> anymore.

Performance won't be much of an issue in most cases with Emulated when the Offline Template Compiler is used.


Post a Comment for "Angular 2 Native View Encapsulation"