[css-cascade-6][editorial] Examples of relative syntax in scope

css-cascade-6/Overview.bs

@@ -267,7 +267,7 @@ Scoping Styles: the ''@scope'' rule</h3>
 		while the nested selectors only match elements
 		that are [=in scope|in a resulting scope=]:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		@scope (.light-scheme) {
 		  /* Only match links inside a light-scheme */
 		  a { color: darkmagenta; }
@@ -290,7 +290,7 @@ Scoping Styles: the ''@scope'' rule</h3>
 		an author can limit matching more deeply nested descendants.
 		For example:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		@scope (.media-object) to (.content > *) {
 		  img { border-radius: 50%; }
 		  .content { padding: 1em; }
@@ -346,7 +346,7 @@ Effects of ''@scope''</h4>
 	<div class=example>
 		The following selectors have the same specificity (0,0,1):
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		@scope (#hero) {
 		  img { border-radius: 50%; }
 		}
@@ -386,7 +386,7 @@ Effects of ''@scope''</h4>
 		Those custom scope attributes are then
 		appended to every single selector in CSS:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		p[data-scope~='main-component'] { color: red; }
 		p[data-scope~='sub-component'] { color: blue; }
 
@@ -417,7 +417,7 @@ Effects of ''@scope''</h4>
 		are excluded from the resulting scope,
 		which allows authors to create non-overlapping scopes by default:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		@scope ([data-scope='main-component']) to ([data-scope]) {
 		  p { color: red; }
 
@@ -437,7 +437,7 @@ Effects of ''@scope''</h4>
 		and universal selector to create scope boundaries that overlap,
 		such that the inner scope root is part of both scopes:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		@scope ([data-scope='main-component']) to ([data-scope] > *) {
 		  p { color: red; }
 
@@ -490,6 +490,59 @@ Scoped Style Rules</h4>
 		is interpreted as a non-[=relative selector=]
 		(but the [=subject=] must still be [=in scope=] to match).
 
+	<div class="example">
+		By default, selectors in a [=scoped style rule=]
+		are [=relative selectors=],
+		with the [=scoping root=] and [=descendant combinator=]
+		implied at the start.
+		The following selectors will match the same elements:
+
+		<pre highlight=css>
+		@scope (#my-component) {
+		  p { color: green; }
+		  :scope p { color: green; }
+		}
+		</pre>
+
+		Authors can adjust the implied relationship
+		by adding an explicit combinator:
+
+		<pre highlight=css>
+		@scope (#my-component) {
+		  > p { color: green; }
+		  :scope > p { color: green; }
+		}
+		</pre>
+
+		Authors can also target or explicitly position
+		the [=scoping root=] in a selector
+		by including either '':scope'' or ''&'' in a given selector:
+
+		<pre highlight=css>
+		@scope (#my-component) {
+		  :scope { border: thin solid; }
+		  & { border: thin solid; }
+
+		  main :scope p { color: green; }
+		  main & p { color: green; }
+		}
+		</pre>
+
+		While the '':scope'' or ''&'' selectors
+		can both refer to the [=scoping root=],
+		they have otherwise different meanings in this context:
+
+		: Differences in selector matching
+		:: The '':scope'' selector will only match the [=scoping root=] itself,
+			while the ''&'' selector is able to match any element
+			that is matched by the <<scope-start>> selector list.
+		: Differences in selector specificity
+		:: The '':scope'' selector has a specificity
+			equal to other pseudo-classes,
+			while the ''&'' selector has the specificity
+			equal to the most specific selector in <<scope-start>>.
+	</div>
+
 <h4 id="scope-limits">
 Identifying Scoping Roots and Limits</h4>
 
@@ -549,7 +602,7 @@ Identifying Scoping Roots and Limits</h4>
 		[=Scoping limits=] can use the '':scope'' pseudo-class
 		to require a specific relationship to the [=scoping root=]:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		/* .content is only a limit when it is a direct child of the :scope */
 		@scope (.media-object) to (:scope > .content) { ... }
 		</pre>
@@ -558,7 +611,7 @@ Identifying Scoping Roots and Limits</h4>
 		by using '':scope''.
 		For example:
 
-		<pre class=lang-css>
+		<pre highlight=css>
 		/* .content is only a limit when the :scope is inside .sidebar */
 		@scope (.media-object) to (.sidebar :scope .content) { ... }
 		</pre>
@@ -574,6 +627,36 @@ Scope Nesting</h4>
 	are [=scoped selectors|scoped by=]
 	the selectors of the outer one.
 
+	<div class=example>
+		When nesting ''@scope'' rules inside other ''@scope'' rules,
+		or inside other selectors,
+		the <<scope-start>> selector is
+		[=relative selector|relative to=] the nesting context,
+		while the <<scope-end>> and any [=scoped style rules=]
+		are [=relative selector|relative to=] the [=scoping root=]
+		For example, the following code:
+
+		<pre highlight=css>
+		@scope (.parent-scope) {
+		  @scope (:scope > .child-scope) to (:scope .limit) {
+		    :scope .content {
+		      color: red;
+		    }
+		  }
+		}
+		</pre>
+
+		is equivalent to:
+
+		<pre highlight=css>
+		@scope (.parent-scope > .child-scope) to (.parent-scope > .child-scope .limit) {
+		  .parent-scope > .child-scope .content {
+		    color: red;
+		  }
+		}
+		</pre>
+	</div>
+
 	Global name-defining [=at-rules=]
 	such as ''@keyframes'' or ''@font-face'' or ''@layer''
 	that are defined inside ''@scope'' are valid,