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

docs: extend :host selector documentation (#41055) 

explain behavior of selectors *before* `:host` that escape encapsulation
and explain preferred usage of `:host-context`

PR Close #41055
This commit is contained in:
LordMsz 2021-03-01 23:32:46 +01:00 committed by Andrew Kushnir
parent 681c3417fe
commit 2d69f0c9ca
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,6 +83,15 @@ The next example targets the host element again, but only when it also has the `
<code-example path="component-styles/src/app/hero-details.component.css" region="hostfunction" header="src/app/hero-details.component.css"></code-example>
The `:host` selector can also be combined with other selectors.
Add selectors behind the `:host` to select child elements, for example using `:host h2` to target all `<h2>` elements inside a component's view.
<div class="alert is-helpful">
You should not add selectors (other than `:host-context`) in front of the `:host` selector to style a component based on the outer context of the component's view. Such selectors are not scoped to a component's view and will select the outer context, but it's not native behavior. Use `:host-context` selector for that purpose instead.
</div>
### :host-context
Sometimes it's useful to apply styles based on some condition *outside* of a component's view.