Merge branch 'main' into 35720-Implement-interactive-widget

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")}}

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

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

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)