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

Question

I have the following styles:

#right_content {
  padding: 30px 40px !important;
}

I store this inside a file register.css, which is bound to my register.ts.

The problem is that <div id="right_content"> is located in a parent module, which means I can't directly modify its CSS properties from within register.ts.

<div id="right_content">
  <router-outlet></router-outlet>
</div>

My register.html and register.css goes into the router outlet. I want to style the #right_content from register.css.

Is there any way I can turn off view encapsulation (or whatever the adding of the _ngcontent-mxo-3 attributes is called), just for the above styles?

Answer 1

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