Angular 2 native view encapsulation

Question

There is already an answered question that explains the difference between ViewEncapsulation.Emulated, ViewEncapsulation.Native ad ViewEncapsulation.None.

Let's say there is Electron application that is guaranteed to be bundled with Chromium version that natively supports shadow DOM and ViewEncapsulation.Native. How can this case benefit from native encapsulation to avoid emulation overhead?

Another possible case is debugging views in Angular 2 application that are heavily cluttered with helper attributes and namespaced CSS classes due to ViewEncapsulation.Emulated.

Can default encapsulation be changed to ViewEncapsulation.Native globally for all components that don't specify encapsulation?

What are the other practical appliances of ViewEncapsulation.Native?

score 3 · Accepted Answer · edited Jul 08 '16 at 11:54

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.

There was a syntactic error, but otherwise it is working. Thank you. — Estus Flask, Jul 08 '16 at 11:56

Angular 2 native view encapsulation

1 Answers1

Linked