fix(CSS): add :host related and ::slotted selector examples (#28099)

mdn · Jul 21, 2023 · bba4437 · bba4437
1 parent 197f282
commit bba4437
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
@@ -15,6 +15,8 @@ One typical use of this is with a descendant selector expression — for example
 
 > **Note:** This has no effect when used outside a shadow DOM.
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_context.html", "tabbed-shorter")}}
+
 ```css
 /* Selects a shadow root host, only if it is
    a descendant of the selector argument given */

diff --git a/files/en-us/web/css/_colon_host/index.md b/files/en-us/web/css/_colon_host/index.md
@@ -11,6 +11,8 @@ The **`:host`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps
 
 > **Note:** This has no effect when used outside a shadow DOM.
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host.html", "tabbed-shorter")}}
+
 ```css
 /* Selects a shadow root host */
 :host {

diff --git a/files/en-us/web/css/_colon_host_function/index.md b/files/en-us/web/css/_colon_host_function/index.md
@@ -13,6 +13,8 @@ The most obvious use of this is to put a class name only on certain custom eleme
 
 > **Note:** This has no effect when used outside a shadow DOM.
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_function.html", "tabbed-shorter")}}
+
 ```css
 /* Selects a shadow root host, only if it is
    matched by the selector argument */

diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md
@@ -11,6 +11,8 @@ The **`::slotted()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/We
 
 This only works when used inside CSS placed within a [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM). Note also that this selector won't select a text node placed into a slot; it only targets actual elements.
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-slotted.html", "tabbed-shorter")}}
+
 ```css
 /* Selects any element placed inside a slot */
 ::slotted(*) {