::ng-deep selector

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