Skip to content

[@scope] Allow declarations directly within @scope #11161

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
Nov 8, 2024
Merged

[@scope] Allow declarations directly within @scope #11161

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
43 changes: 41 additions & 2 deletions css-cascade-6/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ Syntax of ''@scope''</h4>

<pre class="prod def">
@scope [(<<scope-start>>)]? [to (<<scope-end>>)]? {
<<rule-list>>
<<block-contents>>
}
</pre>

Expand All @@ -445,7 +445,10 @@ Syntax of ''@scope''</h4>
used to identify the [=scoping root=](s).
* <dfn><<scope-end>></dfn> is a <<selector-list>> [=selector=]
used to identify any [=scoping limits=].
* the <<rule-list>> represents the [=scoped style rules=].
* the [=qualified rules=] within <<block-contents>>,
as well as any [=nested declarations rules=]
produced by [[#scoped-declarations|scoped declarations]],
represents the [=scoped style rules=].

[=Pseudo-elements=] cannot be [=scoping roots=] or [=scoping limits=];
they are invalid both within <<scope-start>> and <<scope-end>>.
Expand Down Expand Up @@ -664,6 +667,39 @@ Issue(10795): Should the scope proximity calculation be impacted by nesting scop
(e.g. within ''@layer'')
are [=scoped style rules|scoped=].

<h4 id="scoped-declarations">
Scoped Declarations </h4>

[=Declarations=] may be used directly
with the body of a ''@scope'' rule.
Contiguous runs of [=declarations=]
are wrapped in [=nested declarations rules=],
which match the [=scoping root=]
with zero [=specificity=].

<div class=example>
<pre highlight=css>
@scope (.foo) {
border: 1px solid black;
}
</pre>

is equivalent to:

<pre highlight=css>
@scope (.foo) {
:where(:scope) {
border: 1px solid black;
}
}
</pre>
</div>

Just like for [=style rules=],
[=declarations=] and child [=rules=]
may be [[css-nesting-1#mixing|mixed]]
within ''@scope''.

<h3 id="preshint">
Precedence of Non-CSS Presentational Hints</h3>

Expand Down Expand Up @@ -731,6 +767,9 @@ Changes since the 21 March 2023 Working Draft</h3>
Significant changes since the
<a href="https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/">21 March 2023 Working Draft</a> include:

* Allowed [=declarations=] directly within ''@scope''.
(<a href="https://github.com/w3c/csswg-drafts/issues/10389">Issue 10389</a>)

* The '':scope'' selector can match the [=featureless=] [=shadow host=] when
that host is the [=scoping root=] element.
(<a href="https://github.com/w3c/csswg-drafts/issues/9025">Issue 9025</a>)
Expand Down