[css-nesting-1] fixes #8082

Author: argyleink

css-nesting-1/Overview.bs

@@ -576,7 +576,7 @@ Syntax {#syntax}
  ██████   ███████  ██    ██ ████████
 -->
 
-Nesting Conditional Rules {#conditionals}
+Nesting Nesting Other At-Rules {#conditionals}
 -----------------------------------------
 
 	In addition to [=nested style rules=],
@@ -594,10 +594,6 @@ Nesting Conditional Rules {#conditionals}
 		with their [=nesting selector=] taking its definition
 		from the nearest ancestor [=style rule=].
 
-	Issue: Want more than just conditional rules--
-	@scope and @layer make sense, at minimum.
-	(<a href="https://github.com/w3c/csswg-drafts/issues/7965">Issue 7965</a>)
-
 	Issue: Do @media/etc gain a <code>.style</code> attribute
 	to expose their properties,
 	or do we pretend properties are wrapped in a ''& {...}'' rule,
@@ -666,6 +662,46 @@ Nesting Conditional Rules {#conditionals}
 				}
 			}
 		*/
+
+		<b>/* Example nesting Cascade Layers */</b>
+		html {
+			@layer base {
+				block-size: 100%;
+
+				@layer support {
+					& body {
+						min-block-size: 100%;
+					}
+				}
+			}
+		}
+		/* equivalent to
+			@layer base {
+				html { block-size: 100%; }
+			}
+			@layer base.support {
+				html body { min-block-size: 100%; }
+			}
+		*/
+
+		<b>/* Example nesting Scoping */</b>
+		.card {
+			inline-size: 40ch;
+			aspect-ratio: 3/4;
+
+			@scope (&) {
+				:scope {
+					border: 1px solid white;
+				}
+			}
+		}
+
+		/* equivalent to
+			.card { inline-size: 40ch; aspect-ratio: 3/4; }
+			@scope (.card) {
+				:scope { border-block-end: 1px solid white; }
+			}
+		*/
 		</pre>
 	</div>