@@ -247,7 +247,7 @@ Scoping Styles in CSS: the ''@scope'' rule</h3>
247
247
248
248
<pre class='prod'>
249
249
@scope (<<scope-start>> ) [to (<<scope-end>> )]? {
250
- <<stylesheet>>
250
+ <<stylesheet>>
251
251
}
252
252
</pre>
253
253
@@ -289,13 +289,13 @@ Scoping Styles in CSS: the ''@scope'' rule</h3>
289
289
290
290
<pre class=lang-html>
291
291
<section data-scope="main-component">
292
- <p data-scope="main-component">...<p>
292
+ <p data-scope="main-component">...<p>
293
293
294
- <!-- sub-component root is in both scopes -->
295
- <section data-scope="main-component sub-component">
296
- <!-- children are only in the inner scope -->
297
- <p data-scope="sub-component">...<p>
298
- </section>
294
+ <!-- sub-component root is in both scopes -->
295
+ <section data-scope="main-component sub-component">
296
+ <!-- children are only in the inner scope -->
297
+ <p data-scope="sub-component">...<p>
298
+ </section>
299
299
</section>
300
300
</pre>
301
301
@@ -320,11 +320,11 @@ Scoping Styles in CSS: the ''@scope'' rule</h3>
320
320
321
321
<pre class=lang-html>
322
322
<section data-scope="main-component">
323
- <p>...<p>
324
- <section data-scope="sub-component">
325
- <!-- children are only in the inner scope -->
326
- <p>...<p>
327
- </section>
323
+ <p>...<p>
324
+ <section data-scope="sub-component">
325
+ <!-- children are only in the inner scope -->
326
+ <p>...<p>
327
+ </section>
328
328
</section>
329
329
</pre>
330
330
@@ -395,13 +395,13 @@ Scope Proximity in the Cascade</h3>
395
395
<section class="light-scheme">
396
396
<a href="#">
397
397
light scope:
398
- darkmagenta link color
399
- </a>
398
+ darkmagenta link color
399
+ </a>
400
400
<aside class="dark-scheme">
401
- <a href="#">
402
- both scopes, but dark-scheme is a closer ancestor:
403
- plum link color
404
- </a>
401
+ <a href="#">
402
+ both scopes, but dark-scheme is a closer ancestor:
403
+ plum link color
404
+ </a>
405
405
</aside>
406
406
</section>
407
407
</pre>
0 commit comments