0

I'm trying to figure out how exactly ::ng-deep selector works. How does it omit random nghost and ngcontent attributes names?

Thanks in advance

leszczu450
  • 241
  • 2
  • 11

1 Answers1

1

if you use ::ng-deep in a component where view encapsulation is turned off, it stays there. Since this is invalid CSS, some rules break. It's silent and partial failure because CSS parser simply sees ::ng-deep as unknown selector.

If we want our component styles to cascade to all child elements of a component, but not to any other element on the page, we can currently do so using by combining the :host with the ::ng-deep selector.

:host ::ng-deep h2 {
    color: red;
}

FYI: The ::ng-deep pseudo-class selector also has a couple of aliases: >>> and /deep/, and all three are soon to be removed.

https://blog.angular-university.io/angular-host-context/

How and Where to use ::ng-deep?

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
  • Thanks for your anwer. However, it still does not explain HOW it works. AFAIK, when we have ViewEncapsulation set to Emulated, then every element in component get its attribute: ng-conent- and then component's styles are being rewritten for example: div[ng-contnent-1]: {...}. I still do not understand how ng-deep works and how does it make it possible to style children elements – leszczu450 Oct 10 '18 at 17:32