::ng-deep selector

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

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

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

The following example targets all <h3> elements, from the host element down through this component to all of its child elements in the DOM.

Source
parent.component.html
Parent content.

<app-child></app-child>
parent.component.css
::ng-deep h3 {
  font-style: italic;
}
child.component.html
<h3>Child title</h3>
Child content.
Result
Parent content.

Child title

Child content.

The ::ng-deep combinator also has the aliases >>>, and /deep/.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the view encapsulation section.

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.

Tutorials