From f47d71927e4dc46f3aabde0a56c7f940da988d9f Mon Sep 17 00:00:00 2001
From: Dave Letorey <dave@code-red.uk>
Date: Mon, 2 Dec 2024 14:41:03 +0000
Subject: [PATCH] created page for :has-slotted and links to reference it
 (#36865)

* created page for :has-slotted and links to reference it

* added nolint to the hidden html example to fix

* added a simple example of :has-slotted

* fixed spelling of example name

* added explanation of the simple example and commented out the examples

* uncommented the examples and removed the complex one

* Update files/en-us/web/css/_doublecolon_slotted/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/css/_colon_has-slotted/index.md

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

* removed the CSS pseudo-class from ::slotted

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
---
 .../en-us/web/css/_colon_has-slotted/index.md | 75 +++++++++++++++++++
 .../web/css/_doublecolon_slotted/index.md     |  1 +
 files/en-us/web/html/element/slot/index.md    |  1 +
 .../en-us/web/html/element/template/index.md  |  2 +-
 4 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 files/en-us/web/css/_colon_has-slotted/index.md

diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md
new file mode 100644
index 000000000000000..9fb0f6c7294235f
--- /dev/null
+++ b/files/en-us/web/css/_colon_has-slotted/index.md
@@ -0,0 +1,75 @@
+---
+title: ":has-slotted"
+slug: Web/CSS/:has-slotted
+page-type: css-pseudo-class
+browser-compat: css.selectors.has-slotted
+---
+
+{{CSSRef}}
+
+The **`:has-slotted`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches when the content of a {{HTMLElement("slot")}} element is not empty or not using the default value (see [Using templates and slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots) for more information).
+
+> [!NOTE] Even a single whitespace text node is sufficient to make `:has-slotted` apply.
+
+This only works when used inside CSS placed within a [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM).
+
+```css
+/* Selects the content of a <slot> element that has content that is not default  */
+:has-slotted {
+  color: green;
+}
+
+/* Selects the content of a <slot> element that has no content or default  */
+:not(:has-slotted) {
+  color: red;
+}
+```
+
+## Syntax
+
+```css-nolint
+:has-slotted {
+  /* ... */
+}
+```
+
+## Examples
+
+This example has two `<slot>` elements, one of which has been assigned some content and the other has not.
+
+### HTML
+
+```html
+<p>
+  <template shadowrootmode="open">
+    <style>
+      :has-slotted {
+        color: rebeccapurple;
+      }
+    </style>
+    <slot name="one">Placeholder 1</slot>
+    <slot name="two">Placeholder 2</slot>
+  </template>
+  <span slot="one">Slotted content</span>
+</p>
+```
+
+### Result
+
+The `<slot>` element that has been assigned content matched the `:has-slotted` pseudo-class and has the `color` value of `rebbecapurple` applied.
+
+{{EmbedLiveSample("simple_example",100,300)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- HTML {{HTMLElement("template")}} element
+- HTML {{HTMLElement("slot")}} element
+- {{CSSXRef("::slotted")}}
diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md
index 4caa731c7fa8453..2a9419ad726135c 100644
--- a/files/en-us/web/css/_doublecolon_slotted/index.md
+++ b/files/en-us/web/css/_doublecolon_slotted/index.md
@@ -122,6 +122,7 @@ Our markup includes three custom elements, including a custom element with an in
 - {{cssxref(":host")}}
 - {{cssxref(":host_function", ":host()")}}
 - {{cssxref(":host-context", ":host-context()")}}
+- {{cssxref(":has-slotted")}}
 - [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
 - HTML [`slot`](/en-US/docs/Web/HTML/Global_attributes/slot) attribute
 - HTML {{HTMLElement("slot")}} element
diff --git a/files/en-us/web/html/element/slot/index.md b/files/en-us/web/html/element/slot/index.md
index f925c462d8a064c..febf0d2df95e220 100644
--- a/files/en-us/web/html/element/slot/index.md
+++ b/files/en-us/web/html/element/slot/index.md
@@ -145,4 +145,5 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 - HTML {{HTMLElement("template")}} element
 - HTML [`slot`](/en-US/docs/Web/HTML/Global_attributes/slot) attribute
 - CSS {{CSSXref("::slotted")}} pseudo-element
+- CSS {{cssxref(":has-slotted")}} pseudo-class
 - [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping) module
diff --git a/files/en-us/web/html/element/template/index.md b/files/en-us/web/html/element/template/index.md
index 28d54913f502bb0..ac37005283de8e3 100644
--- a/files/en-us/web/html/element/template/index.md
+++ b/files/en-us/web/html/element/template/index.md
@@ -380,7 +380,7 @@ Since `firstClone` is a `DocumentFragment`, only its children are added to `cont
 
 - [`part`](/en-US/docs/Web/HTML/Global_attributes/part) and [`exportparts`](/en-US/docs/Web/HTML/Global_attributes/exportparts) HTML attributes
 - {{HTMLElement("slot")}} HTML element
-- {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}}, and {{CSSXref(":host-context", ":host-context()")}} CSS pseudo-classes
+- {{CSSXref(":has-slotted")}}, {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}}, and {{CSSXref(":host-context", ":host-context()")}} CSS pseudo-classes
 - {{CSSXref("::part")}} and {{CSSXref("::slotted")}} CSS pseudo-elements
 - [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) interface
 - [Using templates and slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots)