iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Blakenator 2019-05-14 12:01:37 -05:00 committed by Matias Niemelä
parent 77578266fd
commit af4925f374
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
aio/content/guide/component-styles.md
View File

@ -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 `<h3>` elements, from the host element down
through this component to all of its child elements in the DOM.