Unable to add style to projected content in Angular 4

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

:host /deep/ [modal-header] { font-weight: bold; }

In angular documentation they mention that /deep/ is deprecated so you can use ::ng-deep

:host ::ng-deep [modal-header] { font-weight: bold; }

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.

Component Styles

stackblitz demo

Quoting from the official Angular documentation

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

The other alternative could be to use the @Component decorators encapsulation property in a combination with adding a class to the host using @HostBinding

1. Set child component's encapsulation: ViewEncapsulation.None. This will make sure that there is no style encapsulation and the styles are valid globally.

2. To encapsulate the styles, add a custon CSS class to the host of the child component as

   @HostBinding('class.custContainerClass') containerClass: boolean = true;
   

3. Write your styles in the child component as

   .custContainerClass .projectedElement { }
   

Demo at: https://stackblitz.com/edit/angular-add-styles-to-projected-content