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?

Estus Flask · Accepted Answer · 2016-07-08 11:54:47Z

3

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.

edited Jul 8, 2016 at 11:54

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

answered Jul 8, 2016 at 5:09

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

There was a syntactic error, but otherwise it is working. Thank you.

Günter Zöchbauer Over a year ago

Thanks for fixing :) and for the feedback.

Collectives™ on Stack Overflow

Angular 2 native view encapsulation

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related