From 2d69f0c9caa88aa3fac10684507935802e9496e2 Mon Sep 17 00:00:00 2001
From: LordMsz <33070601+LordMsz@users.noreply.github.com>
Date: Mon, 1 Mar 2021 23:32:46 +0100
Subject: [PATCH] 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
---
 aio/content/guide/component-styles.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index a81407b758..9d2c14eefb 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -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.