Skip to content

Commit 065b17d

Browse files
LeaVeroutabatkins
andauthored
[css-scoping] First pass at adding :has-slotted (w3c#10959)
* First pass at adding `:has-slotted` `assignedNodes` reference doesn’t work * Fix assignedNodes * Update css-scoping-1/Overview.bs Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com> * Fix --------- Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
1 parent 3cc471b commit 065b17d

File tree

1 file changed

+23
-3
lines changed

1 file changed

+23
-3
lines changed

css-scoping-1/Overview.bs

+23-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ spec:dom; type:dfn;
2424
text:find slottables
2525
text:find flattened slottables
2626
text:element; for:/
27-
spec:html; type:element; text:style
27+
spec:html; type:element;
28+
text:style
2829
spec:selectors-4; type:dfn;
2930
text: static profile
3031
text: dynamic profile
@@ -40,7 +41,7 @@ spec:dom; type:dfn; text:child
4041
spec:css-color-5; type:function; text:color()
4142
</pre>
4243

43-
<!--
44+
<!--
4445

4546
<h2 id="intro">
4647
Introduction</h2>
@@ -507,6 +508,25 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element</h4>
507508
The only way to style assigned text nodes
508509
is by styling the <a>slot</a> and relying on inheritance.
509510

511+
<h4 id='the-has-slotted-pseudo'>
512+
Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-class</h4>
513+
514+
The <dfn selector>:has-slotted</dfn> pseudo-class
515+
matches <{slot}> elements
516+
which have a non-empty list of <a lt="find slottables">slotted nodes</a>.
517+
518+
When '':has-slotted'' matches a slot with fallback content,
519+
we can conclude that the fallback content is <em>not</em> being displayed.
520+
521+
Note: Even a single whitespace text node is sufficient to make '':has-slotted''' apply.
522+
This is by design, so that the behavior of this pseudo-class is consistent with the behavior of the {{HTMLSlotElement/assignedNodes()}} method.
523+
A future version of this specification is expected to introduce a way to exclude this case from matching.
524+
525+
Note: It is expected that a future version of this specification will introduce a functional '':has-slotted()'' pseudo-class that allows
526+
more fine-grained matching by accepting a selector argument.
527+
'':has-slotted'' is <em>not</em> an alias of '':has-slotted(*)'',
528+
as the latter would not match slotted text nodes, but '':has-slotted'' does.
529+
510530
<wpt>
511531
css-scoping-shadow-slotted-nested.html
512532
css-scoping-shadow-slotted-rule.html
@@ -968,4 +988,4 @@ which protect them from the things defined in this specification).
968988

969989
<wpt hidden>
970990
chrome-1492368-crash.html
971-
</wpt>
991+
</wpt>

0 commit comments

Comments
 (0)