From 303ff0d9ba93e4aa967b2b7c71033fc199ad9578 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 17 Jul 2024 12:34:11 +0100 Subject: [PATCH 1/2] add has-slotted psuedo class --- css-scoping-1/Overview.bs | 42 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/css-scoping-1/Overview.bs b/css-scoping-1/Overview.bs index 8803f47e683c..ece171555f3e 100644 --- a/css-scoping-1/Overview.bs +++ b/css-scoping-1/Overview.bs @@ -424,6 +424,44 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element The only way to style assigned text nodes is by styling the slot and relying on inheritance. +

+Matching Selectors Against Slot-Assigned Content: the '':has-slotted()'' pseudo-class

+ + The :has-slotted() pseudo-class, when evaluated + in the context of a shadow tree, + matches the slot, if one of its + assigned, after flattening, matches the provided <>. + In any other context, it matches nothing. This pseudo-class only exists on slots. + + The [=specificity=] of '':has-slotted()'' is that of a pseudo-class, + plus the [=specificity=] of its argument. + + The grammar of the '':has-slotted()'' pseudo-element is: + + 
:has-slotted( <> )
+ +
+ For example, say you had a component with both children and a shadow tree, + like the following: + + 
+			<x-foo>
+				<div id="one" slot="foo" class="foo">...</div>
+				<"shadow tree">
+					<slot id="theslot" name="foo"></slot>
+				</"shadow tree">
+			</x-foo>
+
+ + For a stylesheet within the shadow tree, + selectors like '':has-slotted(*)'', '':has-slotted(div)'', '':has-slotted(.foo)'', and '':has-slotted(#one)'' + will match ''#theslot'', while '':has-slotted(p)'', '':has-slotted(:not(.foo))'', '':has-slotted(#two)'' + will not. +
+ + Note: '':has-slotted()'' will only match the ''slot'' element, not the contents. Slotted contents + can be matched with the ''::slotted()'' pseudo-element. +