Skip to content

[css-conditional-5] Container queries use the flat tree #5984 #10701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 8, 2024
Merged

[css-conditional-5] Container queries use the flat tree #5984 #10701

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 8 additions & 13 deletions css-conditional-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ Container Queries</h2>
for [=container size queries=] by specifying
the additional query types using the 'container-type' property
(or the 'container' [=shorthand=]).
Style rules applying to a [=query container=]’s <a>shadow-including descendants</a>
Style rules applying to a [=query container=]’s [=flat tree=] descendants
can be conditioned by querying against it,
using the ''@container'' [=conditional group rule=].

Expand Down Expand Up @@ -384,30 +384,25 @@ Container Queries</h2>
will each respond to their own container context.
</div>

For selectors with pseudo elements, query containers can be established by
the <a>shadow-including inclusive ancestors</a> of the <a>ultimate
originating element</a>.
For the ''::part()'' and ''::slotted()'' <a>pseudo-element</a> selectors,
which represent real elements in the DOM tree, query containers can be
established by [=flat tree=] ancestors of those elements.
For other <a>pseudo-element</a>s, query containers can be established by
inclusive [=flat tree=] ancestors of their <a>originating element</a>.

<div class=note>
It follows that:

* Pseudo elements themselves can not be query containers
* ''::before'', ''::after'', ''::marker'', and ''::backdrop'' query their
originating elements
* ''::first-letter'' and ''::first-line'' query their originating elements,
even if the <a>fictional tag sequence</a> may push the
<code>::first-line</code> past other elements for the purpose of
inheritance and rendering
* Multiple pseudo elements do not allow pseudo elements to be query
containers for other pseudo elements. E.g., the host, but not the
<code>::part()</code>, can be the query container for
<code>::before</code> in <code>host::part()::before</code>. Similarly,
<code>::before</code> can not be the query container for the
<code>::marker</code> in <code>div::before::marker</code>
* ''::slotted()'' selectors can query containers inside the shadow tree,
including the slot itself
* ''::part()'' selectors can query its originating host, but not internal
query containers inside the shadow tree
* ''::slotted()::before'' selectors can query the slotted shadow host child
* ''::part()'' selectors can query containers inside the shadow tree
* ''::placeholder'' and ''::file-selector-button'' can query the input
element, but do not expose any internal containers if the input element is
implemented using a shadow tree
Expand Down