[css-cascade-6] Refactor @scope section

Author: fantasai

css-cascade-6/Overview.bs

@@ -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,
@@ -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,
@@ -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
@@ -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">
@@ -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=]
+		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):
@@ -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
@@ -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.