diff --git a/files/en-us/web/css/_colon_host-context/index.md b/files/en-us/web/css/_colon_host-context/index.md
index b8c8e81ff6922af..2a13c60e49ff232 100644
--- 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
index a083f352329b1c5..f578b083dbdf45f 100644
--- 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
index 2f04192723e5d59..dabe5e8e82c3b61 100644
--- 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
index 8e7f8faa93c8712..c1345ff76d457a6 100644
--- 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(*) {