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

13
votes

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?

1
cssangulartypescript
View encapsulation doesn't help you when you want to style a parent from a child or did I misunderstand your question. Can you please add more code that demonstrates how the styles and elements you want to style are releated? – Günter Zöchbauer
@GünterZöchbauer #right_content is located in a parent component, so I can't change the styles from the CSS in the child component right now, simply because it adds an attribute to my CSS. – Lucas
This doesn't help me. Please add more code that is the easiest way to make things clear. I'll add an answer but that's only a wild guess because I don't fully understand the question. – Günter Zöchbauer
@GünterZöchbauer Please check my update, see if that makes more sense. – Lucas
So you actually want to style a parent from a child. That's just not supported. You can only style the component from itself or from an ancestor but you can't style an ancestor from a child or other descendant. The only way I can think of is adding styles to <head> imperatively. – Günter Zöchbauer

1 Answers

16
votes

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