8000 [css-scoping] Simplify cascading to just rely on tree-of-trees (which… · w3c/csswg-drafts@62b2d1d · GitHub
Skip to content

Commit 62b2d1d

Browse files
tabatkinstabatkins
committed
[css-scoping] Simplify cascading to just rely on tree-of-trees (which isn't defined yet).
1 parent f19e12f commit 62b2d1d

1 file changed

Lines changed: 52 additions & 63 deletions

File tree

‎css-scoping/Overview.bs‎

Lines changed: 52 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ Introduction</h2>
2323

2424

2525
<!--
26-
██████ ██████ ███████ ████████ ████ ██ ██ ██████
27-
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
28-
██ ██ ██ ██ ██ ██ ██ ████ ██ ██
26+
██████ ██████ ███████ ████████ ████ ██ ██ ██████
27+
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
28+
██ ██ ██ ██ ██ ██ ██ ████ ██ ██
2929
██████ ██ ██ ██ ████████ ██ ██ ██ ██ ██ ████
30-
██ ██ ██ ██ ██ ██ ██ ████ ██ ██
31-
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
32-
██████ ██████ ███████ ██ ████ ██ ██ ██████
30+
██ ██ ██ ██ ██ ██ ██ ████ ██ ██
31+
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
32+
██████ ██████ ███████ ██ ████ ██ ██ ██████
3333
-->
3434

3535
<h2 id='scope'>
@@ -82,11 +82,11 @@ Document Markup for Scoping</h4>
8282

8383
<!--
8484
███████ ██████ ██████ ███████ ████████ ████████
85-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
86-
██ ███ ██ ██ ██ ██ ██ ██ ██ ██
87-
██ ███ ██ ██████ ██ ██ ██ ████████ ██████
88-
██ █████ ██ ██ ██ ██ ██ ██
89-
██ ██ ██ ██ ██ ██ ██ ██ ██
85+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
86+
██ ███ ██ ██ ██ ██ ██ ██ ██ ██
87+
██ ███ ██ ██████ ██ ██ ██ ████████ ██████
88+
██ █████ ██ ██ ██ ██ ██ ██
89+
██ ██ ██ ██ ██ ██ ██ ██ ██
9090
███████ ██████ ██████ ███████ ██ ████████
9191
-->
9292

@@ -97,12 +97,12 @@ CSS Syntax for Scoping: the ''@scope'' rule</h4>
9797
The syntax of the ''@scope'' rule is:
9898

9999
<pre class='prod'>
100-
@scope <<selector>> {
100+
@scope <<selector-list>> {
101< 8000 /td>101
<<stylesheet>>
102102
}
103103
</pre>
104104

105-
where the elements matched by the <<selector>>
105+
where the elements matched by the <<selector-list>>
106106
are <a>scoping roots</a> for the style rules in <<stylesheet>>,
107107
and selectors of style rules scoped by ''@scope'' are
108108
<a>scope-contained</a> to their <a>scoping root</a>.
@@ -111,7 +111,7 @@ CSS Syntax for Scoping: the ''@scope'' rule</h4>
111111
This rule makes it very easy for authors to create scoped style sheets,
112112
which could affect the optimization strategies for implementing scoped styles.
113113

114-
If multiple elements match the <<selector>>,
114+
If multiple elements match the <<selector-list>>,
115115
the <<stylesheet>> is effectively duplicated
116116
and scoped independently to each one.
117117
Authors should avoid using overly-generic selectors
@@ -176,11 +176,11 @@ CSS Syntax for Scoping: the ''@scope'' rule</h4>
176176

177177
<!--
178178
██ ██████ ██████ ███████ ████████ ████████
179-
████ ██ ██ ██ ██ ██ ██ ██ ██ ██
180-
██ ██ ██ ██ ██ ██ ██ ██
181-
██████ ██ ██ ██ ████████ ██████
182-
██ ██ ██ ██ ██ ██ ██
183-
████ ██ ██ ██ ██ ██ ██ ██ ██
179+
████ ██ ██ ██ ██ ██ ██ ██ ██ ██
180+
██ ██ ██ ██ ██ ██ ██ ██
181+
██████ ██ ██ ██ ████████ ██████
182+
██ ██ ██ ██ ██ ██ ██
183+
████ ██ ██ ██ ██ ██ ██ ██ ██
184184
██ ██████ ██████ ███████ ██ ████████
185185
-->
186186

@@ -209,10 +209,10 @@ Selecting Outside the Scope: '':scope-context()'' pseudo-class</h4>
209209
Possible ideas:
210210

211211
<pre>
212-
:scope-context(<<selector>>) div {...}
213-
scope(<<selector>>) div {...}
214-
\scope <<selector>>\ div {...}
215-
<<selector>> \scope\ div {...}
212+
:scope-context(<<selector-list>>) div {...}
213+
scope(<<selector-list>>) div {...}
214+
\scope <<selector-list>>\ div {...}
215+
<<selector-list>> \scope\ div {...}
216216
</pre>
217217

218218
This functionality would replace ''@global'', which is a poor excuse for a selector.
@@ -225,7 +225,7 @@ Selecting Outside the Scope: '':scope-context()'' pseudo-class</h4>
225225
██████ █████████ ██ ██ ██ ██ ██ ██ ██ ██ ██
226226
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██
227227
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
228-
██████ ██ ██ ██ ██ ████████ ███████ ███ ███
228+
██████ ██ ██ ██ ██ ████████ ███████ ███ ███
229229
-->
230230

231231
<h2 id='shadow-dom'>
@@ -356,12 +356,12 @@ Shadow DOM Selectors</h3>
356356

357357
<!--
358358
██ ██ ██ ███████ ██████ ████████
359-
████ ██ ██ ██ ██ ██ ██ ██
360-
██ ██ ██ ██ ██ ██ ██
361-
█████████ ██ ██ ██████ ██
362-
██ ██ ██ ██ ██ ██ ██
363-
████ ██ ██ ██ ██ ██ ██ ██
364-
██ ██ ██ ███████ ██████ ██
359+
████ ██ ██ ██ ██ ██ ██ ██
360+
██ ██ ██ ██ ██ ██ ██
361+
█████████ ██ ██ ██████ ██
362+
██ ██ ██ ██ ██ ██ ██
363+
████ ██ ██ ██ ██ ██ ██ ██
364+
██ ██ ██ ███████ ██████ ██
365365
-->
366366

367367
<h4 id='host-selector'>
@@ -451,7 +451,7 @@ Selecting Into the Light: the '':host'', '':host()'', and '':host-context()'' ps
451451
██████ █████████ ██ ██ ██ ██ ██ ██ ██ ██ ██
452452
██ ██ ██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██
453453
████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
454-
██ ██ ██████ ██ ██ ██ ██ ████████ ███████ ███ ███
454+
██ ██ ██████ ██ ██ ██ ██ ████████ ███████ ███ ███
455455
-->
456456

457457
<h4 id='shadow-pseudoelement'>
@@ -507,13 +507,13 @@ Selecting Into the Dark: the ''::shadow'' pseudo-element</h4>
507507
</div>
508508

509509
<!--
510-
██ ██ ██████ ██ ███████ ████████ ████████ ████████ ████████
510+
██ ██ ██████ ██ ███████ ████████ ████████ ████████ ████████
511511
████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
512512
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
513513
██████ ██ ██ ██ ██ ██ ██████ ██ ██
514514
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
515515
████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
516-
██ ██ ██████ ████████ ███████ ██ ██ ████████ ████████
516+
██ ██ ██████ ████████ ███████ ██ ██ ████████ ████████
517517
-->
518518

519519
<h4 id='content-combinator'>
@@ -569,13 +569,13 @@ Selecting Shadow-Projected Content: the ''::slotted'' pseudo-element</h4>
569569
</div>
570570

571571
<!--
572-
██ ██ ██
573-
██ ██ ██
574-
██ ██ ██
572+
██ ██ ██
573+
██ ██ ██
574+
██ ██ ██
575575
██ ██ ██
576-
██ ██ ██
577-
██ ██ ██
578-
██ ██ ██
576+
██ ██ ██
577+
██ ██ ██
578+
██ ██ ██
579579
-->
580580

581581
<h4 id='deep-combinator'>
@@ -617,11 +617,11 @@ Selecting Through Shadows: the ''>>>'' combinator</h4>
617617

618618
<!--
619619
██████ ███ ██████ ██████ ███ ████████ ████████
620-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
621-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
622-
██ ██ ██ ██████ ██ ██ ██ ██ ██ ██████
623-
██ █████████ ██ ██ █████████ ██ ██ ██
624-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
620+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
621+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
622+
██ ██ ██ ██████ ██ ██ ██ ██ ██ ██████
623+
██ █████████ ██ ██ █████████ ██ ██ ██
624+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
625625
██████ ██ ██ ██████ ██████ ██ ██ ████████ ████████
626626
-->
627627

@@ -639,24 +639,13 @@ Cascading</h4>
639639
between Origin and Scope,
640640
called Shadow Tree.
641641

642-
* When comparing two declarations,
643-
if one of them is in a <a>shadow tree</a>
644-
and the other is in a document that contains that <a>shadow tree</a>,
645-
then for normal rules the declaration from the outer document wins,
646-
and for important rules the declaration from the <a>shadow tree</a> wins.
642+
* When comparing two declarations
643+
that are in different <a>shadow trees</a>,
644+
then for normal rules the declaration earlier in the <a>tree-of-trees order</a> wins,
645+
and for important rules the declaration coming later in the <a>tree-of-trees order</a> wins.
647646

648647
Note: This is the <em>opposite</em> of how scoped styles work.
649648

650-
* When comparing two declarations,
651-
if both are in <a>shadow trees</a> with the same <a>host element</a>,
652-
then for normal rules the declaration from the <a>shadow tree</a> that was created most recentl 1898 y wins,
653-
and for important rules the declaration from the <a>shadow tree</a> that was created less recently wins.
654-
655-
When calculating <a href="https://drafts.csswg.org/css-cascade/#cascade-order">Order of Appearance</a>,
656-
the tree of trees,
657-
defined by the Shadow DOM specification,
658-
is used to calculate ordering.
659-
660649
<h4 id='inheritance'>
661650
Inheritance</h4>
662651

@@ -667,13 +656,13 @@ Inheritance</h4>
667656
rather than from their normal parent.
668657

669658
<!--
670-
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ██████
659+
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ██████
671660
██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ██
672-
██ ██ ██ ██ ██ ██ ████ ████ ██ ████ ██ ██ ██
673-
██████ ████████ ██ ██ ██ ████ ██ ███ ██ ██████ ██ ██ ██ ██ ██████
661+
██ ██ ██ ██ ██ ██ ████ ████ ██ ████ ██ ██ ██
662+
██████ ████████ ██ ██ ██ ████ ██ ███ ██ ██████ ██ ██ ██ ██ ██████
674663
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████ ██ ██
675664
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
676-
██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██ ██ ██████
665+
██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██ ██ ██████
677666
-->
678667

679668
<h2 id="fragment-scoping">

0 commit comments

Comments
 (0)