[go: nahoru, domu]
Skip to content

Commit

Permalink
[css-cascade-6] Refactor @scope section
Browse files Browse the repository at this point in the history
  • Loading branch information
@fantasai
fantasai committed Mar 2, 2023
1 parent 98917aa commit 634d784
Showing 1 changed file with 63 additions and 61 deletions.
124 changes: 63 additions & 61 deletions css-cascade-6/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,13 +230,12 @@ Layer Ordering</h4>
██████ ██████ ███████ ██ ████ ██ ██ ██████
-->

<h3 id='scoped-styles'>
Scoped Styles</h3>
<h3 id='scoped-styles' oldids="scope-atrule">
Scoping Styles: the ''@scope'' rule</h3>

A <dfn>scope</dfn> is a subtree or fragment of a document,
which can be used by selectors for more targeted matching.

A [=scope=] can be formed by determining:
A [=scope=] is formed by determining:

* The [=scoping root=] [=node=],
which acts as the upper bound of the scope,
Expand All @@ -245,17 +244,19 @@ Scoped Styles</h3>
which act as the lower bounds.

An element is <dfn>in scope</dfn> if:

* It is an [=inclusive descendant=] of the [=scoping root=], and
* It is not an [=inclusive descendant=] of a [=scoping limit=].

[=Scopes=] are described in CSS using the ''@scope'' rule.

Note: In contrast to [[CSS-SCOPING-1#shadow-dom|Shadow Encapsulation]],
which describes a persistent one-to-one relationship in the DOM
between a [=shadow host=] and its nested [=shadow tree=],
multiple overlapping [=scopes=] can be defined in relation to the same elements.

Scoped styles are described in CSS using
the <dfn>@scope</dfn> [=block at-rule=],
which declares a [=scoping root=] and optional [=scoping limits=]
associated with a set of [=style rules=].

<div class=example>
For example,
an author might have wide-reaching color-scheme scopes,
Expand Down Expand Up @@ -317,24 +318,22 @@ Scoped Styles</h3>
</pre>
</div>

<!--
███████ ██████ ██████ ███████ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ███ ██ ██ ██ ██ ██ ██ ██ ██
██ ███ ██ ██████ ██ ██ ██ ████████ ██████
██ █████ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██
███████ ██████ ██████ ███████ ██ ████████
-->
<h4 id="scope-effects">
Effects of ''@scope''</h4>

<h4 id='scope-atrule'>
Scoping Styles: the ''@scope'' rule</h4>

The <dfn>@scope</dfn> [=block at-rule=]
allows authors to scope style rules in CSS,
with the application of [=weak scoping proximity=]
between the [=scoping root=] and the [=subject=] of each style rule.
<!-- This causes declarations [insert appropriate sentence from issue below]. -->
The ''@scope'' [=at-rule=] has three primary effects
on the [=style rules=] it contains:

* The [=style rules=] in an ''@scope'' <<stylesheet>>
are [=scoped style rules=].

* The [=cascade=] prioritizes declarations
with a [=scope proximity|more proximate=] [=scoping root=],
regardless of specificity or source order
by applying [=weak scoping proximity=]
between the [=scoping root=] and the [=subject=] of each [=scoped style rule=].
<!-- This causes declarations [insert appropriate sentence from issue below]. -->

Issue(6790): Should ''@scope'' use strong or weak scoping proximity?
[=Strong scoping proximity=] causes declarations to be weighted more strongly
Expand All @@ -346,6 +345,13 @@ Scoping Styles: the ''@scope'' rule</h4>
The Working Group currently leans towards weak proximity,
and recommends that as a starting point for prototypes.

Note: Unlike <a href="https://www.w3.org/TR/css-nesting/">Nesting</a>,
selectors within an ''@scope'' rule
do not acquire the specificity of any parent selector(s) in the ''@scope'' prelude.

<h4 id="scope-syntax">
Syntax of ''@scope''</h4>

The syntax of the ''@scope'' rule is:

<pre class="prod def">
Expand All @@ -356,51 +362,44 @@ Scoping Styles: the ''@scope'' rule</h4>

where:

<pre class="prod def">
<dfn><<scope-start>></dfn> = <<forgiving-selector-list>>
<dfn><<scope-end>></dfn> = <<forgiving-selector-list>>
</pre>

A ''@scope'' rule which specifies a <<scope-start>>
produces a number of <dfn>explicit scopes</dfn> as follows:

* For each element matched by <<scope-start>>,
create a [=scope=] using that element as the [=scoping root=].
* For each [=scope=] created by the above:
* Collect all elements that are [=in scope=]
and that match <<scope-end>>,
using the [=scoping root=] as the '':scope'' element, then
* Set those elements as the [=scoping limits=].
* <dfn><<scope-start>></dfn> is a <<forgiving-selector-list>> [=selector=]

This comment has been minimized.

Sign in to view

Copy link
@cdoublev

cdoublev Mar 3, 2023

Collaborator

Production rules were usefull... =(
used to identify the [=scoping root=](s).
* <dfn><<scope-end>></dfn> is a <<forgiving-selector-list>> [=selector=]
used to identify any [=scoping limits=].
* the <<stylesheet>> represents the [=scoped style rules=].

[=Pseudo-elements=] cannot be [=scoping roots=] or [=scoping limits=];
they are invalid both within <<scope-start>> and <<scope-end>>.

A ''@scope'' rule which does not specify a <<scope-start>>
produces a single <dfn>implicit scope</dfn> as follows:
<h4 id="scoped-rules">
Scoped Style Rules</h4>

* The [=scoping root=] is the [=parent element=] of the [=owner node=]
of the stylesheet where the ''@scope'' rule is defined.
If no such element exist,
then the [=scoping root=] is the [=root=] of the containing [=node tree=].
* Collect all elements that are [=in scope=]
and that match <<scope-end>>,
using the [=scoping root=] as the '':scope'' element, then
* Set those elements as the [=scoping limits=].
<dfn>Scoped style rules</dfn> differ from non-scoped rules
in the following ways:

The ''@scope'' [=at-rule=] has three primary effects
on the [=style rules=] in its <<stylesheet>>:
* Their selectors can only match elements that are [=in scope=].
(This only applies to the [=subject=];
the rest of the selector can match unrestricted.)

* Selectors can only match elements that are [=in scope=].
This only applies to the [=subject=];
the rest of the selector can match unrestricted.
<h4 id="scope-limits">
Identifying Scoping Roots and Limits</h4>

* The [=cascade=] prioritizes declarations
with a [=scope proximity|more proximate=] [=scoping root=],
regardless of specificity or source order.
A ''@scope'' rule produces one or more [=scopes=] as follows:

: Finding the [=scoping root=](s)
:: For each element matched by <<scope-start>>,
create a [=scope=] using that element as the [=scoping root=].
If no <<scope-start>> is specified,
the [=scoping root=] is the [=parent element=] of the [=owner node=]
of the stylesheet where the ''@scope'' rule is defined.
(If no such element exists,
then the [=scoping root=] is the [=root=] of the containing [=node tree=].)

Note: Unlike <a href="https://www.w3.org/TR/css-nesting/">Nesting</a>,
selectors within an ''@scope'' rule
do not acquire the specificity of any parent selector(s) in the ''@scope'' prelude.
: Finding any [=scoping limits=]
:: For each [=scope=] created by a [=scoping root=],
its [=scoping limits=] are set to all elements
that are [=in scope=] and that match <<scope-end>>,
using the [=scoping root=] as the '':scope'' element.

<div class=example>
The following selectors have the same specificity (0,0,1):
Expand Down Expand Up @@ -503,14 +502,17 @@ do not acquire the specificity of any parent selector(s) in the ''@scope'' prelu
</pre>
</div>

<h4 id="scope-scope">
Scope Nesting</h4>

''@scope'' rules can be nested.
In this case, just as with the nested style rules,
the selectors of the inner ''@scope''
(including those defining its [=scope=])
are [=scoped selectors|scoped by=]
the selectors of the outer one.

Global, name-defining [=at-rules=]
Global name-defining [=at-rules=]
such as ''@keyframes'' or ''@font-face'' or ''@layer''
that are defined inside ''@scope'' are valid,
but are not scoped or otherwise affected
Expand Down Expand Up @@ -643,7 +645,7 @@ Changes since the 21 December 2021 First Public Working Draft</h3>

* Added the {{CSSScopeRule}} interface.

* Added [=implicit scopes=].
* Added implicit scopes by making ''<<scope-start>>'' optional.
(<a href="https://github.com/w3c/csswg-drafts/issues/6606">Issue 6606</a>)

* Disallowed [=pseudo-elements=] in the ''@scope'' prelude.
Expand Down

0 comments on commit 634d784

Please sign in to comment.