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