16

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?

Michael
  • 8,362
  • 6
  • 61
  • 88
Lucas
  • 16,930
  • 31
  • 110
  • 182
  • 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 May 05 '16 at 10:57
  • @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 May 05 '16 at 11:05
  • 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 May 05 '16 at 11:06
  • @GünterZöchbauer Please check my update, see if that makes more sense. – Lucas May 05 '16 at 11:21
  • 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 `` imperatively. – Günter Zöchbauer May 05 '16 at 11:27
  • @GünterZöchbauer Yeah, okay then. You could update your answer to detail on `ViewEncapsulation.None`, and I'll accept it? – Lucas May 05 '16 at 11:28
  • Use ::ng-deep, it works across all the browsers as suggested by [Günter Zöchbauer](https://stackoverflow.com/a/37049049/2922178) – Aman Jan 29 '21 at 09:52

1 Answers1

19

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 2
    `>>>` and `/deep/` [are deprecated.](https://www.chromestatus.com/features/6750456638341120) – Michael Apr 27 '18 at 17:35
  • 3
    use `::ng-deep` – Günter Zöchbauer Apr 27 '18 at 17:36
  • [That's supposedly going away, too:](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) _"The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools. As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`). Until then `::ng-deep` should be preferred for a broader compatibility with the tools."_ – Michael Apr 27 '18 at 17:42
  • 1
    It's going away when all browsers support style encapsulation natively and Angular drops `ViewEncapsulation.Emulated` which is currently the default and therefore unlikely to vanish soon ,-) – Günter Zöchbauer Apr 27 '18 at 17:44
  • 1
    Same with `>>>` and `/deep/` but SASS only supports `::ng-deep` anymore this is why I suggest this nowadays. – Günter Zöchbauer Apr 27 '18 at 17:47