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