22

I have an issue with scss and the cli: angular adds an attribute _nghost-fyw-1 to the apps tag (component) during runtime. at the same time it adds an attribute selector to my css called _ngcontent-fyw-1 which of course won't work.

Do you have an idea how i could change this behavior/ avoid it?

PS: it also applies to regular css.

my components .scss file looks like this:

my-comp {
  h1 {
    background-color: red;
  }
}
wzr1337
  • 3,609
  • 5
  • 30
  • 53

3 Answers3

51

Well,

I found the answer myself. Using the default settings, you must not supply the wrapping my-comp element selector in the components css.

Instead use the * element selector to affect all elements nested in my-comp. Otherwise, angular will treat the my-comp selector as an additional element and thus add the _ng-content-* attribute, which of course is not present in the DOM.

Another option is to disable ViewEncapsulation for your component - be aware that it just affects the component my-comp

import {Component, ViewEncapsulation} from 'angular2/core'

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation explains the three different settings modes perfectly.

Ondra Žižka
  • 43,948
  • 41
  • 217
  • 277
wzr1337
  • 3,609
  • 5
  • 30
  • 53
  • 1
    I don't understand the first part. Why should one use `*`? Isn't that what `:host` is for? Anyway, ViewEncapsulation.None saved my back when using an ancient syntax-highlighter. +1 – Ondra Žižka Mar 02 '17 at 00:15
  • 1
    In other words. Set `{ encapsulation: ViewEncapsulation.None } ` in the component declaration options. – micah Jun 01 '17 at 09:50
18

update

It's ::ng-deep since a while.
See also the comments below.

original

You didn't provide too much details where you add your styles and what elements you target with the selectors.

The "official" way if you want styles to cross element boundaries is to use >>> like

:host >>> h1 {
  background-color: red;
}
  • :host targets the current element.
  • >>> (or /deep/) makes Angular ignore _nghost-xxx attributes which is used for component style encapsulation emulation.

See also Styles in component for D3.js do not show in angular 2

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • (deprecated) /deep/, >>>, and ::ng-deep https://angular.io/guide/component-styles – borracciaBlu Jan 16 '18 at 00:53
  • 2
    You can ignore that deprecation. It will not go away before there is a replacement. – Günter Zöchbauer Jan 16 '18 at 04:37
  • There will never be a replacement for a generic shadow-piercing selector operator, as it would defy the goal of style encapsulation. `::part` and `::theme` provide a viable, but not equivalent, alternative. – MaxArt Jun 10 '19 at 14:45
  • @MaxArt you are right of course, but that only slowly emerged during the years. `::part` and `::theme` weren't invented yet when I posted the answer. There was a `slotted` discussed i the meantime. No idea where that went. I didn't follow development here since quite a while. – Günter Zöchbauer Jun 10 '19 at 15:53
  • 1
    Fair enough, it was just a reminder for those who come across your answer and still hope for the future. Granted, `:ng-deep` *still* works in Angular 8. About the last part, are you referring to the [`::slotted` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted)? In that case, it will gain universal support as soon as Edge will become Chromium-based – MaxArt Jun 10 '19 at 21:57
0

::ng-deep works for me, adding into app.component.scss:

:host ::ng-deep .mat-card {
    background: #000 !important;
    color: #fff;
}

The documentation (https://angular.io/guide/component-styles) says:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers 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.

Use it, with precaution...

Alejandro Araujo
  • 439
  • 2
  • 7