CODEWITHSUNDEEP
javascripttypescriptangularshadow-dom
Estus Flask
Estus Flask

Reputation: 222369

Angular 2 native view encapsulation

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?

Upvotes: 3

Views: 1434

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657158

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.

Upvotes: 3

Related Questions