Skip to content

Commit a175f94

Browse files
committed
[css-cascade-6][editorial] Add example of implicit scope root
1 parent 5d8ef73 commit a175f94

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

css-cascade-6/Overview.bs

+32
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,38 @@ Identifying Scoping Roots and Limits</h4>
513513
interpreting '':scope'' and ''&''
514514
exactly as in [=scoped style rules=].
515515

516+
<div class=example>
517+
Authors can establish local scoping
518+
for <{style}> elements by leaving out the <<scope-start>> selector.
519+
For example:
520+
521+
<pre class=lang-html>
522+
&lt;div>
523+
&lt;style>
524+
@scope {
525+
p { color: red; }
526+
}
527+
&lt;/style>
528+
&lt;p>this is red&lt;/p>
529+
&lt;/div>
530+
&lt;p>not red&lt;/p>
531+
</pre>
532+
533+
That would be equivalent to:
534+
535+
<pre class=lang-html>
536+
&lt;div id="foo">
537+
&lt;style>
538+
@scope (#foo) {
539+
p { color: red; }
540+
}
541+
&lt;/style>
542+
&lt;p>this is red&lt;/p>
543+
&lt;/div>
544+
&lt;p>not red&lt;/p>
545+
</pre>
546+
</div>
547+
516548
<div class=example>
517549
[=Scoping limits=] can use the '':scope'' pseudo-class
518550
to require a specific relationship to the [=scoping root=]:

0 commit comments

Comments
 (0)