[css-cascade-6] Lower boundary scope limit selectors are excluded from scope #6577

Author: mirisuzanne

css-cascade-6/Overview.bs

@@ -212,6 +212,11 @@ Cascade Layers</h3>
 
 	Issue: [[css-cascade-5#layering]]
 
+<h4 id="layer-ordering">
+Layer Ordering</h4>
+
+	Issue: [[css-cascade-5#layer-ordering]]
+
 
 <!--
  ██████   ██████   ███████  ████████  ████ ██    ██  ██████
@@ -239,13 +244,12 @@ Scoped Styles</h2>
 		Each element matched by <<scope-end>> is a [=scoping limit=].
 		The <dfn>scoping limit</dfn> elements define the lower bounds of a scope,
 		so that [=scoped selectors=] are not able to match
-		any elements nested within them.
+		any [=scoping limit=] elements,
+		or any elements nested within them.
 
 	Each resulting [=scope=] includes a [=scoping root=] and all its descendants,
-	up to and including any [=scoping limit=] elements,
-	but not the descendants of those limits.
-
-	Issue(6577): Inclusive vs exclusive scope boundaries
+	up to any [=scoping limit=] elements. [=Scoping limit=] elements and
+	their descendants are not included in the [=scope=].
 
 	Note: In contrast to [[CSS-SCOPING-1#shadow-dom|Shadow Encapsulation]],
 	which describes a persistent one-to-one relationship in the DOM
@@ -280,17 +284,16 @@ Scoped Styles</h2>
 		For example:
 
 		<pre class=lang-css>
-		@scope (.media-object) to (.content) {
+		@scope (.media-object) to (.content > *) {
 		  img { border-radius: 50%; }
-
-		  /* it is also possible to style the lower limit element itself */
 		  .content { padding: 1em; }
 		}
 		</pre>
 
 		The ''img'' selector will only match image tags that are in a DOM fragment
 		starting with any ''.media-object'',
-		and including all descendants until any intervening ''.content'' class.
+		and including all descendants up to
+		any intervening children of the ''.content'' class.
 	</div>
 
 	Issue: Should scoping limits be added to the definition of [=scoped selectors=]?
@@ -425,31 +428,45 @@ Scoping Styles: the ''@scope'' rule</h4>
 		&lt;section data-scope="main-component">
 		  &lt;p>...&lt;p>
 		  &lt;section data-scope="sub-component">
-		    &lt;!-- children are only in the inner scope -->
 		    &lt;p>...&lt;p>
 		  &lt;/section>
 		&lt;/section>
 		</pre>
 
 		Then the class or attribute can be used
-		for establishing both upper and lower boundaries,
-		such that scopes only overlap at those boundaries:
+		for establishing both upper and lower boundaries.
+		Elements matched by a lower boundary selector
+		are excluded from the resulting scope,
+		which allows authors to create non-overlapping scopes by default:
 
 		<pre class=lang-css>
 		@scope ([data-scope='main-component']) to ([data-scope]) {
 		  p { color: red; }
 
-		  /* both sections are part of the outer scope */
+		  /* only the outer section is part of the outer scope */
 		  section { background: snow; }
 		}
 
 		@scope ([data-scope='sub-component']) to ([data-scope]) {
 		  p { color: blue; }
 
-		  /* the inner section is also part of the inner scope */
+		  /* the inner section is only part of the inner scope */
 		  section { color: ghostwhite; }
 		}
 		</pre>
+
+		However, authors can use the child combinator
+		and universal selector to create scope boundaries that overlap,
+		such that the inner scope root is part of both scopes:
+
+		<pre class=lang-css>
+		@scope ([data-scope='main-component']) to ([data-scope] > *) {
+		  p { color: red; }
+
+		  /* both sections are part of the outer scope */
+		  section { background: snow; }
+		}
+		</pre>
 	</div>
 
 	''@scope'' rules can be nested.
@@ -597,6 +614,17 @@ Precedence of Non-CSS Presentational Hints</h3>
 <h2 id="changes">
 Changes</h2>
 
+This appendix is <em>informative</em>.
+
+<h3 id="changes-2022-08">
+Changes since the 21 December 2021 First Public Working Draft</h3>
+
+	Significant changes since the
+	<a href="https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/">21 December 2021 First Public Working Draft</a> include:
+
+	* [=Scoping limit=] elements are excluded from the resulting [=scope=].
+		(<a href="https://github.com/w3c/csswg-drafts/issues/6577">Issue 6577</a>)
+
 <h3 id="additions-l5">
 Additions Since Level 5</h3>