Skip to content

Commit

Permalink
[css-scoping] First pass at adding :has-slotted (#10959)
Browse files Browse the repository at this point in the history
* 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. <[email protected]>

* Fix

---------

Co-authored-by: Tab Atkins Jr. <[email protected]>
  • Loading branch information
LeaVerou and tabatkins authored Sep 27, 2024
1 parent 3cc471b commit 065b17d
Showing 1 changed file with 23 additions and 3 deletions.
26 changes: 23 additions & 3 deletions css-scoping-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ spec:dom; type:dfn;
text:find slottables
text:find flattened slottables
text:element; for:/
spec:html; type:element; text:style
spec:html; type:element;
text:style
spec:selectors-4; type:dfn;
text: static profile
text: dynamic profile
Expand All @@ -40,7 +41,7 @@ spec:dom; type:dfn; text:child
spec:css-color-5; type:function; text:color()
</pre>

<!--
<!--

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

<h4 id='the-has-slotted-pseudo'>
Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-class</h4>

The <dfn selector>:has-slotted</dfn> pseudo-class
matches <{slot}> elements
which have a non-empty list of <a lt="find slottables">slotted nodes</a>.

When '':has-slotted'' matches a slot with fallback content,
we can conclude that the fallback content is <em>not</em> being displayed.

Note: Even a single whitespace text node is sufficient to make '':has-slotted''' apply.
This is by design, so that the behavior of this pseudo-class is consistent with the behavior of the {{HTMLSlotElement/assignedNodes()}} method.
A future version of this specification is expected to introduce a way to exclude this case from matching.

Note: It is expected that a future version of this specification will introduce a functional '':has-slotted()'' pseudo-class that allows
more fine-grained matching by accepting a selector argument.
'':has-slotted'' is <em>not</em> an alias of '':has-slotted(*)'',
as the latter would not match slotted text nodes, but '':has-slotted'' does.

<wpt>
css-scoping-shadow-slotted-nested.html
css-scoping-shadow-slotted-rule.html
Expand Down Expand Up @@ -968,4 +988,4 @@ which protect them from the things defined in this specification).

<wpt hidden>
chrome-1492368-crash.html
</wpt>
</wpt>

0 comments on commit 065b17d

Please sign in to comment.