From 8be29493035fe9438ccb773792b829863ebe2276 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 19 Nov 2024 16:32:56 +0000 Subject: [PATCH 1/9] created page for :has-slotted and links to reference it --- .../en-us/web/css/_colon_has-slotted/index.md | 210 ++++++++++++++++++ .../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, 213 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..402415072dfd3c2 --- /dev/null +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -0,0 +1,210 @@ +--- +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 + +### Highlighting slots with required content + +This example extends the [Creating a template with some slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots#creating_a_template_with_some_slots) example on the _Using templates and slots_ guide. This example highlights the `` element that should be filled in to give visual feedback. + +#### HTML + +In the {{HTMLElement("summary")}} element `required` classes have been added to the elements containing `` elements that need content. + +```html + + + + <NEED NAME> + + + NEED DESCRIPTION + + + +``` + +When the web component is called, this example is missing the value for the `` with the `name` of `description`. + +```html + + element-details +
+
slot="element-name"
+
The name of the element
+
slot="description"
+
Description of the element
+
+ +``` + +#### CSS + +Here the CSS selector is looking for an element that has the class of `required` and then checking if it does not match the `:has-slotted` pseudo class. + +```css +.required :not(:has-slotted) { + color: tomato; +} +``` + +```html hidden live-sample___highlighting_slots_with_required_content + + + + + + template + A mechanism for holding client- side content that is not to be rendered + when a page is loaded but may subsequently be instantiated during runtime + using JavaScript. + + + slot + A placeholder inside a web component that users can fill with their own + markup, with the effect of composing different DOM trees together. +
+
name
+
The name of the slot.
+
+ + + element-details +
+
slot="element-name"
+
The name of the element
+
slot="description"
+
Description of the element
+
+ +``` + +```js hidden live-sample___highlighting_slots_with_required_content +customElements.define( + "element-details", + class extends HTMLElement { + constructor() { + super(); + const template = document.getElementById( + "element-details-template", + ).content; + const shadowRoot = this.attachShadow({ mode: "open" }); + shadowRoot.appendChild(template.cloneNode(true)); + } + }, +); +``` + +#### Result + +These results show that the third web component does not have content for the `description` ``. + +{{EmbedLiveSample("highlighting_slots_with_required_content",100,300)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- HTML {{HTMLElement("template")}} element +- HTML {{HTMLElement("slot")}} element +- CSS {{CSSXRef("::slotted")}} pseudo-element diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md index 4caa731c7fa8453..c09fed88e847ee1 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()")}} +- CSS {{cssxref(":has-slotted")}} pseudo-class - [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) From a450725d4c60b0dd19e1926610b2e059609a2555 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 19 Nov 2024 17:20:27 +0000 Subject: [PATCH 2/9] added nolint to the hidden html example to fix --- files/en-us/web/css/_colon_has-slotted/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md index 402415072dfd3c2..f62ac3b4b81543c 100644 --- a/files/en-us/web/css/_colon_has-slotted/index.md +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -80,7 +80,7 @@ Here the CSS selector is looking for an element that has the class of `required` } ``` -```html hidden live-sample___highlighting_slots_with_required_content +```html nolint hidden live-sample___highlighting_slots_with_required_content + Slotted content one +

+``` + +#### Result + +These results show that the third web component does not have content for the `description` ``. + +{{EmbedLiveSample("simple_examaple",100,300)}} + ### Highlighting slots with required content This example extends the [Creating a template with some slots](/en-US/docs/Web/API/Web_components/Using_templates_and_slots#creating_a_template_with_some_slots) example on the _Using templates and slots_ guide. This example highlights the `` element that should be filled in to give visual feedback. From 116be0c2ceb4bbfb0645cf2bcb3ea7abbaf2e3fd Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 26 Nov 2024 11:04:41 +0000 Subject: [PATCH 4/9] fixed spelling of example name --- files/en-us/web/css/_colon_has-slotted/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md index a9d6da157cead18..76bdcb6f22ea3c3 100644 --- a/files/en-us/web/css/_colon_has-slotted/index.md +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -58,7 +58,7 @@ This only works when used inside CSS placed within a [shadow DOM](/en-US/docs/We These results show that the third web component does not have content for the `description` ``. -{{EmbedLiveSample("simple_examaple",100,300)}} +{{EmbedLiveSample("simple_example",100,300)}} ### Highlighting slots with required content From e6ae8d000526baa02300666a8bd61f62595dff99 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 26 Nov 2024 13:46:56 +0000 Subject: [PATCH 5/9] added explanation of the simple example and commented out the examples --- files/en-us/web/css/_colon_has-slotted/index.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md index 76bdcb6f22ea3c3..e63b3ade08b55e8 100644 --- a/files/en-us/web/css/_colon_has-slotted/index.md +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -33,10 +33,12 @@ This only works when used inside CSS placed within a [shadow DOM](/en-US/docs/We } ``` -## Examples + - - template - A mechanism for holding client- side content that is not to be rendered - when a page is loaded but may subsequently be instantiated during runtime - using JavaScript. - - - slot - A placeholder inside a web component that users can fill with their own - markup, with the effect of composing different DOM trees together. -
-
name
-
The name of the slot.
-
- - - element-details -
-
slot="element-name"
-
The name of the element
-
slot="description"
-
Description of the element
-
- -``` - -```js hidden live-sample___highlighting_slots_with_required_content -customElements.define( - "element-details", - class extends HTMLElement { - constructor() { - super(); - const template = document.getElementById( - "element-details-template", - ).content; - const shadowRoot = this.attachShadow({ mode: "open" }); - shadowRoot.appendChild(template.cloneNode(true)); - } - }, -); -``` - -#### Result - -These results show that the third web component does not have content for the `description` ``. - -{{EmbedLiveSample("highlighting_slots_with_required_content",100,300)}} --> - ## Specifications {{Specifications}} From 228461141fd985ab3541629a695274e5030ac633 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 2 Dec 2024 14:20:52 +0000 Subject: [PATCH 7/9] Update files/en-us/web/css/_doublecolon_slotted/index.md Co-authored-by: Estelle Weyl --- files/en-us/web/css/_doublecolon_slotted/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_doublecolon_slotted/index.md b/files/en-us/web/css/_doublecolon_slotted/index.md index c09fed88e847ee1..2a9419ad726135c 100644 --- a/files/en-us/web/css/_doublecolon_slotted/index.md +++ b/files/en-us/web/css/_doublecolon_slotted/index.md @@ -122,7 +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()")}} -- CSS {{cssxref(":has-slotted")}} pseudo-class +- {{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 From f2660680fadcd55b12b6201d7ded17a6405bdbbd Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 2 Dec 2024 14:26:33 +0000 Subject: [PATCH 8/9] Update files/en-us/web/css/_colon_has-slotted/index.md Co-authored-by: Vadim Makeev --- files/en-us/web/css/_colon_has-slotted/index.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md index da9aecb3a17dc0f..edaced4717d27ce 100644 --- a/files/en-us/web/css/_colon_has-slotted/index.md +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -35,11 +35,9 @@ This only works when used inside CSS placed within a [shadow DOM](/en-US/docs/We ## Examples -### Simple example - This example has two `` elements, one of which has been assigned some content and the other has not. -#### HTML +### HTML ```html

@@ -56,9 +54,9 @@ This example has two `` elements, one of which has been assigned some cont

``` -#### Result +### Result -The `` element that has been assigned content matched the `:has-slotted` pseudo class and has the `color` value of `rebbecapurple` applied. +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)}} From f3fe7f0d75bbe6045e8b184b88798258309c752f Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 2 Dec 2024 14:31:44 +0000 Subject: [PATCH 9/9] removed the CSS pseudo-class from ::slotted --- files/en-us/web/css/_colon_has-slotted/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_has-slotted/index.md b/files/en-us/web/css/_colon_has-slotted/index.md index edaced4717d27ce..9fb0f6c7294235f 100644 --- a/files/en-us/web/css/_colon_has-slotted/index.md +++ b/files/en-us/web/css/_colon_has-slotted/index.md @@ -72,4 +72,4 @@ The `` element that has been assigned content matched the `:has-slotted` p - HTML {{HTMLElement("template")}} element - HTML {{HTMLElement("slot")}} element -- CSS {{CSSXRef("::slotted")}} pseudo-element +- {{CSSXRef("::slotted")}}