How to Turn Off View Encapsulation for One Property in Angular 2

How to turn off view encapsulation for one property in Angular 2?

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

It is supported to create selectors that go through component boundaries even when ViewEncapsulation is Emulated (default)

child-component ::ng-deep #right_content {
  padding: 30px 40px !important;
}

Allows to tile the <xxx id="right_content"> from any ancestor

How to remove ViewEncapsulation.None after the component destroyed

Hi if you only need to set the background-color do not set view encapsulation to none!

you can use

:host ::ng-deep .k-grid tr.deactivated{
  background-color: #eef;
}

The following example applies a background-color style to relevant elements that has the CSS class .k-grid tr.deactivated globally.

For the angular concept follow component styles - component-styles

Set ViewEncapsulation.None to every component

ViewEncapsulation will not only allow to bind your contents from other components - it will also stop encapsulating your components styles so if you remove the style or styleUrls from your component decorator the encapsulation will be set to none by the compiler

Check this doc for further queries

Next step you can restrict it while creating your components using angular cli

ng generate component [name] --view-encapsulation=none

This will create your component with the encapsulation property as none - you can check for some commands over here

Hope this helps - Happy coding:)

Angular2 setting view encapsulation globally

You can set default view encapsulation by passing a custom CompilerConfig.
This feature was added in RC.2 (last item in the features list)

1. You can set it on NgModule level

this way doesn't work anymore

    @NgModule({
        // imports, declaration, bootstrap, etc..
        providers: [{
            provide: CompilerConfig, 
            useValue: new CompilerConfig({
                defaultEncapsulation: ViewEncapsulation.None
            })
        }]
    })
    export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule, [
    {
        defaultEncapsulation: ViewEncapsulation.None
    }
]);

3. In more recent Angular versions this can be set in compiler options

Caution: I haven't tried this myself yet.
This is just how I interpreted the docs:

In tsconfig.json

{ 
  ...,
  angularCompilerOptions: {
   defaultEncapsulation: 3;
  }
}
 

• https://angular.io/guide/angular-compiler-options
• https://angular.io/api/core/CompilerOptions
• https://angular.io/api/core/ViewEncapsulation

How default view encapsulation works in Angular

There are three types of encapsulation in angular

• ViewEncapsulation.Emulated and this is set by default
• ViewEncapsulation.None
• ViewEncapsulation.Native

Emulated mode

Assume that you have two different components comp-first and comp-second , For example you define in both of them

<p> Some paragraph </p>

So if you apply some styling for paragraph in comp-first.css

p { 
   color: blue; 
 }

and then inspect p element on comp-first.html and look for its styling will find something like this

p[_ngcontent-ejo-1] {
  color: blue;
}

"_ngcontent-ejo-1" is just a simple key for differentiate such an element from others components elements

None mode

If you apply this mode to such a component for instance comp-first and then you go and inspect any element it will not provide any attribute like "_ngcontent-ejo-1" to any element , So applying any styling or class it will be provided globally .

Native mode

This should give the same result as if you are using emulated mode but it comes with Shadow DOM technology in browsers which support it

Angular 2 native view encapsulation

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.

Related Topics