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 element that has content that is not default */ +:has-slotted { + color: green; +} + +/* Selects the content of a element that has no content or default */ +:not(:has-slotted) { + color: red; +} +``` + +## Syntax + +```css-nolint +:has-slotted { + /* ... */ +} +``` + +## Examples + +This example has two `` elements, one of which has been assigned some content and the other has not. + +### HTML + +```html +

+ + Slotted content +

+``` + +### Result + +The `` 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)