Skip to content

Commit 9030b11

Browse files
fantasaifantasai
committed
[css-scoping] Add issues.
1 parent d378e59 commit 9030b11

2 files changed

Lines changed: 66 additions & 17 deletions

File tree

‎css-scoping/Overview.bs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ CSS Syntax for Scoping: the ''@scope'' rule</h4>
6363
and selectors of style rules scoped by ''@scope'' are
6464
<a>scope-contained</a> to their <a>scoping root</a>.
6565

66+
<p class="issue">
67+
This rule makes it very easy for authors to create scoped style sheets,
68+
which could affect the optimization strategies for implementing scoped styles.
69+
6670
If multiple elements match the <<selector>>,
6771
the <<stylesheet>> is effectively duplicated
6872
and scoped independently to each one.
@@ -122,6 +126,9 @@ CSS Syntax for Scoping: the ''@scope'' rule</h4>
122126
</pre>
123127
</div>
124128

129+
<p class="issue">
130+
If multiple ''@scope'' rules apply to an element,
131+
should they be cascaded by specificity?
125132

126133
<h3 id='scoping-context'>
127134
Querying the Scoping Context</h3>
@@ -271,6 +278,11 @@ Shadow DOM Selectors</h3>
271278
Shadow DOM defines a few new selectors
272279
to help select elements in useful way related to Shadow DOM.
273280

281+
<p class="issue">
282+
This section is still under discussion.
283+
Feedback and advice on intuitive syntax for the following functionality
284+
would be appreciated.
285+
274286
<h4 id='host-selector'>
275287
Selecting Into the Light: the '':host'', '':host()'', and '':host-context()'' pseudo-classes</h4>
276288

@@ -418,6 +430,10 @@ Selecting Shadow-Projected Content: the ''::content'' pseudo-element</h4>
418430
The <dfn selector>::content</dfn> pseudo-element matches the <a>distribution list</a> itself,
419431
on elements that have one.
420432

433+
<p class="issue">
434+
''::content'' is a confusingly general name for something that is specific
435+
to the projected content of a shadow tree.
436+
421437
The ''::content'' pseudo-element must not generate boxes,
422438
unless specified otherwise in another specification.
423439
However, for the purpose of Selectors,

‎css-scoping/Overview.html‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Scoping Module Level 1</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140325>25 March 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140328>28 March 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/shadow-styling>http://dev.w3.org/csswg/shadow-styling</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/shadow-styling>http://dev.w3.org/csswg/shadow-styling</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-scoping%5D%20feedback">www-style@w3.org</a>
@@ -192,16 +192,20 @@ <h4 class="heading settled heading" data-level=2.1.2 id=scope-atrule><span class
192192
<p> The <dfn class=css-code data-dfn-type=at-rule data-export="" id=at-ruledef-scope>@scope<a class=self-link href=#at-ruledef-scope></a></dfn> at-rule allows authors to create scoped style rules using CSS syntax.
193193
The syntax of the <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> rule is:
194194

195-
<pre class=prod>@scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a> {
195+
<pre class=prod>@scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a> {
196196
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-stylesheet title="<stylesheet>">&lt;stylesheet&gt;</a>
197197
}
198198
</pre>
199-
<p> where the elements matched by the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>
199+
<p> where the elements matched by the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>
200200
are <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping roots">scoping roots</a> for the style rules in <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-stylesheet title="<stylesheet>">&lt;stylesheet&gt;</a>,
201201
and selectors of style rules scoped by <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> are
202-
<a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scope-contained-selectors title=scope-contained>scope-contained</a> to their <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>.
202+
<a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scope-contained- title=scope-contained>scope-contained</a> to their <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>.
203203

204-
<p> If multiple elements match the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>,
204+
<p class=issue id=issue-5f568f10><a class=self-link href=#issue-5f568f10></a>
205+
This rule makes it very easy for authors to create scoped style sheets,
206+
which could affect the optimization strategies for implementing scoped styles.
207+
208+
<p> If multiple elements match the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>,
205209
the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-stylesheet title="<stylesheet>">&lt;stylesheet&gt;</a> is effectively duplicated
206210
and scoped independently to each one.
207211
Authors should avoid using overly-generic selectors
@@ -254,6 +258,9 @@ <h4 class="heading settled heading" data-level=2.1.2 id=scope-atrule><span class
254258
aside#sidebar p { color: red; }
255259
</pre> </div>
256260

261+
<p class=issue id=issue-5c7571b6><a class=self-link href=#issue-5c7571b6></a>
262+
If multiple <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> rules apply to an element,
263+
should they be cascaded by specificity?
257264

258265
<h3 class="heading settled heading" data-level=2.2 id=scoping-context><span class=secno>2.2 </span><span class=content>
259266
Querying the Scoping Context</span><a class=self-link href=#scoping-context></a></h3>
@@ -279,10 +286,10 @@ <h4 class="heading settled heading" data-level=2.2.2 id=scope-content-pseudo><sp
279286

280287
<p> Possible ideas:
281288

282-
<pre>:scope-context(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>) div {...}
283-
scope(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>) div {...}
284-
\scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>\ div {...}
285-
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a> \scope\ div {...}
289+
<pre>:scope-context(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>) div {...}
290+
scope(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>) div {...}
291+
\scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>\ div {...}
292+
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a> \scope\ div {...}
286293
</pre>
287294
<p> This functionality would replace <span class=css data-link-type=maybe title=@global>@global</span>, which is a poor excuse for a selector.
288295
</div>
@@ -401,6 +408,11 @@ <h3 class="heading settled heading" data-level=3.2 id=selectors><span class=secn
401408
<p> Shadow DOM defines a few new selectors
402409
to help select elements in useful way related to Shadow DOM.
403410

411+
<p class=issue id=issue-dea392ae><a class=self-link href=#issue-dea392ae></a>
412+
This section is still under discussion.
413+
Feedback and advice on intuitive syntax for the following functionality
414+
would be appreciated.
415+
404416
<h4 class="heading settled heading" data-level=3.2.1 id=host-selector><span class=secno>3.2.1 </span><span class=content>
405417
Selecting Into the Light: the <a class=css data-link-type=maybe href=#selectordef-host0 title=:host>:host</a>, <a class=css data-link-type=maybe href=#selectordef-host title=:host()>:host()</a>, and <a class=css data-link-type=maybe href=#selectordef-host-context title=:host-context()>:host-context()</a> pseudo-classes</span><a class=self-link href=#host-selector></a></h4>
406418

@@ -413,7 +425,7 @@ <h4 class="heading settled heading" data-level=3.2.1 id=host-selector><span clas
413425
<p> The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-host>:host()<a class=self-link href=#selectordef-host></a></dfn> function pseudo-class
414426
has the syntax:
415427

416-
<pre>:host( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
428+
<pre>:host( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-compound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
417429
<p> When evaluated in the context of a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
418430
it matches the <a data-link-type=dfn href=#shadow-tree title="shadow tree’s">shadow tree’s</a> <a data-link-type=dfn href=#host-element0 title="host element">host element</a>
419431
if the <a data-link-type=dfn href=#host-element0 title="host element">host element</a>,
@@ -460,10 +472,10 @@ <h4 class="heading settled heading" data-level=3.2.1 id=host-selector><span clas
460472
which matches a particular selector.
461473
Its syntax is:
462474

463-
<pre>:host-context( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
475+
<pre>:host-context( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-compound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
464476
<p> When evaluated in the context of a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
465477
the <a class=css data-link-type=maybe href=#selectordef-host-context title=:host-context()>:host-context()</a> pseudo-class matches the <a data-link-type=dfn href=#host-element0 title="host element">host element</a>,
466-
if the <a data-link-type=dfn href=#host-element0 title="host element">host element</a> or one of its ancestors matches the provided <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a>.
478+
if the <a data-link-type=dfn href=#host-element0 title="host element">host element</a> or one of its ancestors matches the provided <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-compound-selector title="<compound-selector>">&lt;compound-selector&gt;</a>.
467479
For the purpose of this pseudo-class,
468480
the "ancestor" of an element is:
469481

@@ -542,6 +554,10 @@ <h4 class="heading settled heading" data-level=3.2.3 id=content-combinator><span
542554
<p> The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-content>::content<a class=self-link href=#selectordef-content></a></dfn> pseudo-element matches the <a data-link-type=dfn href=#distribution-list title="distribution list">distribution list</a> itself,
543555
on elements that have one.
544556

557+
<p class=issue id=issue-1b6118ae><a class=self-link href=#issue-1b6118ae></a>
558+
<a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> is a confusingly general name for something that is specific
559+
to the projected content of a shadow tree.
560+
545561
<p> The <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element must not generate boxes,
546562
unless specified otherwise in another specification.
547563
However, for the purpose of Selectors,
@@ -992,7 +1008,7 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
9921008

9931009
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
9941010
Normative References</span><a class=self-link href=#normative></a></h3>
995-
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; et al. <a href=http://www.w3.org/TR/2012/WD-dom-20121206/>DOM4</a>. 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-dom-20121206/>http://www.w3.org/TR/2012/WD-dom-20121206/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
1011+
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a href=http://dom.spec.whatwg.org/>DOM Living Standard</a>. WHATWG Living Standard. (Work in progress.) URL: <a href=http://dom.spec.whatwg.org/>http://dom.spec.whatwg.org/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
9961012

9971013
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
9981014
Informative References</span><a class=self-link href=#informative></a></h3>
@@ -1025,6 +1041,14 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
10251041

10261042

10271043
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
1044+
This rule makes it very easy for authors to create scoped style sheets,
1045+
which could affect the optimization strategies for implementing scoped styles.
1046+
1047+
<a href=#issue-5f568f10> ↵ </a></div><div class=issue>
1048+
If multiple <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> rules apply to an element,
1049+
should they be cascaded by specificity?
1050+
1051+
<a href=#issue-5c7571b6> ↵ </a></div><div class=issue>
10281052
This would be defined similarly to <a class=css data-link-type=maybe href=#selectordef-host-context title=:host-context()>:host-context()</a>,
10291053
but matching the ancestors of the <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a> instead.
10301054

@@ -1034,15 +1058,24 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
10341058

10351059
<p> Possible ideas:
10361060

1037-
<pre>:scope-context(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>) div {...}
1038-
scope(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>) div {...}
1039-
\scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a>\ div {...}
1040-
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltselector title="<selector>">&lt;selector&gt;</a> \scope\ div {...}
1061+
<pre>:scope-context(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>) div {...}
1062+
scope(<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>) div {...}
1063+
\scope <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a>\ div {...}
1064+
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#typedef-selector title="<selector>">&lt;selector&gt;</a> \scope\ div {...}
10411065
</pre>
10421066
<p> This functionality would replace <span class=css data-link-type=maybe title=@global>@global</span>, which is a poor excuse for a selector.
10431067
</p><a href=#issue-aecbd194> ↵ </a></div>
10441068

10451069
<div class=issue>
1070+
This section is still under discussion.
1071+
Feedback and advice on intuitive syntax for the following functionality
1072+
would be appreciated.
1073+
1074+
<a href=#issue-dea392ae> ↵ </a></div><div class=issue>
1075+
<a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> is a confusingly general name for something that is specific
1076+
to the projected content of a shadow tree.
1077+
1078+
<a href=#issue-1b6118ae> ↵ </a></div><div class=issue>
10461079
This is basically a super-descendant combinator.
10471080
If the descendant combinator had a real glyph,
10481081
it would potentially be interesting to just double it.

0 commit comments

Comments
 (0)