From af4925f3743642951e22d3bd4dad4fdda08f810a Mon Sep 17 00:00:00 2001 From: Blakenator Date: Tue, 14 May 2019 12:01:37 -0500 Subject: [PATCH] docs: clarify usage of using /deep/ in component styles guide (#30452) Updated the description regarding the (deprecated) /deep/ pseudo-selector to clarify its propensity to bleed styles across components and its solution closes #29967 PR Close #30452 --- aio/content/guide/component-styles.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index 6075b05577..ab5704bb33 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -106,10 +106,11 @@ if some ancestor element has the CSS class `theme-light`. 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. +Applying the `::ng-deep` pseudo-class to any CSS rule completely disables view-encapsulation for +that rule. Any style with `::ng-deep` applied becomes a global style. In order to scope the specified style +to the current component and all its descendants, be sure to include the `:host` selector before +`::ng-deep`. If the `::ng-deep` combinator is used without the `:host` pseudo-class selector, the style +can bleed into other components. The following example targets all `

` elements, from the host element down through this component to all of its child elements in the DOM.