Angular2 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-*

Question

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

Answer 1

::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...