Skip to content

Commit f9ef880

Browse files
tabatkinstabatkins
committed
[shadow-styling] Swap around /shadow/ and /shadow-all/.
--HG-- extra : rebase_source : 900f5a69304013309c1ae5878965b844039ac2b9
1 parent 2f3439a commit f9ef880

2 files changed

Lines changed: 63 additions & 48 deletions

File tree

‎shadow-styling/Overview.bs‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,9 @@ Selecting Into A Shadow Tree: the ''/shadow/'' combinator</h3>
150150
When a <dfn selector>/shadow/</dfn> combinator is encountered in a selector,
151151
first filter the <a>selector match list</a> to only include elements with <a>shadow trees</a>.
152152
Then replace every element in the <a>selector match list</a>
153-
with the <a>top-level elements</a> of each <a>shadow tree</a> of the element.
153+
with the <a>top-level elements</a> of each <a>shadow tree</a> of the element,
154+
and every element reachable by traversing any number of child lists
155+
from those elements.
154156

155157
<div class='example'>
156158
For example, say you had a component with a <a>shadow tree</a> like the following:
@@ -162,28 +164,29 @@ Selecting Into A Shadow Tree: the ''/shadow/'' combinator</h3>
162164
&lt;span id="not-top">...&lt;/span>
163165
&lt;/div>
164166
&lt;span id="top">...&lt;/span>
167+
&lt;x-bar>
168+
&lt;"shadow tree">
169+
&lt;span id="nested">...&lt;/span>
170+
&lt;/>
171+
&lt;/x-bar>
165172
&lt;/>
166173
&lt;/x-foo>
167174
</pre>
168175

169176
For a stylesheet in the outer document,
170-
''x-foo /shadow/ span'' matches ''#top'',
171-
but not ''#not-top'',
172-
because it's not a <a>top-level element</a> in the <a>shadow tree</a>.
173-
174-
If one wanted to target ''#not-top'',
175-
one way to do it would be with ''x-foo /shadow/ div > span''.
177+
the selector ''x-foo /shadow/ span''
178+
selects ''#top'' and ''#not-top''.
179+
It does not match ''#nested'',
180+
as that element is further nested in the <a>shadow tree</a> of the <code>&lt;x-bar></code> component.
176181
</div>
177182

178-
<h3 id='shadow-all-combinator'>
179-
Selecting All Elements In A Shadow Tree: the ''/shadow-all/'' combinator</h3>
183+
<h3 id='shadow-child-combinator'>
184+
Selecting the Top-level Elements in a Shadow Tree: the ''/shadow-child/'' combinator</h3>
180185

181-
When a <dfn selector>/shadow-all/</dfn> combinator is encountered in a selector,
186+
When a <dfn selector>/shadow-child/</dfn> combinator is encountered in a selector,
182187
first filter the <a>selector match list</a> to only include elements with <a>shadow trees</a>.
183188
Then replace every element in the <a>selector match list</a>
184-
with the <a>top-level elements</a> of each <a>shadow tree</a> of the element,
185-
and every element reachable by traversing any number of child lists
186-
from those elements.
189+
with the <a>top-level elements</a> of each <a>shadow tree</a> of the element.
187190

188191
<div class='example'>
189192
For example, say you had a component with a <a>shadow tree</a> like the following:
@@ -195,22 +198,24 @@ Selecting All Elements In A Shadow Tree: the ''/shadow-all/'' combinator</h3>
195198
&lt;span id="not-top">...&lt;/span>
196199
&lt;/div>
197200
&lt;span id="top">...&lt;/span>
198-
&lt;x-bar>
199-
&lt;"shadow tree">
200-
&lt;span id="nested">...&lt;/span>
201-
&lt;/>
202-
&lt;/x-bar>
203201
&lt;/>
204202
&lt;/x-foo>
205203
</pre>
206204

207205
For a stylesheet in the outer document,
208-
the selector ''x-foo /shadow-all/ span''
209-
selects ''#top'' and ''#not-top''.
210-
It does not match ''#nested'',
211-
as that element is further nested in the <a>shadow tree</a> of the <code>&lt;x-bar></code> component.
206+
''x-foo /shadow-child/ span'' matches ''#top'',
207+
but not ''#not-top'',
208+
because it's not a <a>top-level element</a> in the <a>shadow tree</a>.
209+
210+
If one wanted to target ''#not-top'',
211+
one way to do it would be with ''x-foo /shadow-child/ div > span''.
212212
</div>
213213

214+
<p class='issue'>
215+
This isn't ideal.
216+
Maybe don't implement this one yet,
217+
because it's a clumsy design.
218+
214219
<h3 id='shadow-deep-combinator'>
215220
Selecting Through All Shadows: the ''/shadow-deep/'' combinator</h3>
216221

‎shadow-styling/Overview.html‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>Shadow DOM Styling</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=20140215>15 February 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140305>5 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=%5Bshadow-styling%5D%20feedback">www-style@w3.org</a>
@@ -118,7 +118,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
118118
<li><a href=#inheritance><span class=secno>4</span> Shadow DOM Combinators</a>
119119
<ul class=toc>
120120
<li><a href=#shadow-combinator><span class=secno>4.1</span> Selecting Into A Shadow Tree: the <span class=css data-link-type=maybe title=/shadow/>/shadow/</span> combinator</a>
121-
<li><a href=#shadow-all-combinator><span class=secno>4.2</span> Selecting All Elements In A Shadow Tree: the <span class=css data-link-type=maybe title=/shadow-all/>/shadow-all/</span> combinator</a>
121+
<li><a href=#shadow-child-combinator><span class=secno>4.2</span> Selecting the Top-level Elements in a Shadow Tree: the <span class=css data-link-type=maybe title=/shadow-child/>/shadow-child/</span> combinator</a>
122122
<li><a href=#shadow-deep-combinator><span class=secno>4.3</span> Selecting Through All Shadows: the <span class=css data-link-type=maybe title=/shadow-deep/>/shadow-deep/</span> combinator</a>
123123
<li><a href=#content-combinator><span class=secno>4.4</span> Selecting Distributed Elements: the <span class=css data-link-type=maybe title=/content/>/content/</span> combinator</a></ul>
124124
<li><a href=#selectors><span class=secno>5</span> Shadow DOM Selectors</a>
@@ -283,7 +283,9 @@ <h3 class="heading settled heading" data-level=4.1 id=shadow-combinator><span cl
283283
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow>/shadow/<a class=self-link href=#selectordef-shadow></a></dfn> combinator is encountered in a selector,
284284
first filter the <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#selector-match-list title="selector match list">selector match list</a> to only include elements with <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>.
285285
Then replace every element in the <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#selector-match-list title="selector match list">selector match list</a>
286-
with the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> of each <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the element.
286+
with the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> of each <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the element,
287+
and every element reachable by traversing any number of child lists
288+
from those elements.
287289

288290
<div class=example>
289291
For example, say you had a component with a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> like the following:
@@ -294,27 +296,28 @@ <h3 class="heading settled heading" data-level=4.1 id=shadow-combinator><span cl
294296
&lt;span id="not-top"&gt;...&lt;/span&gt;
295297
&lt;/div&gt;
296298
&lt;span id="top"&gt;...&lt;/span&gt;
299+
&lt;x-bar&gt;
300+
&lt;"shadow tree"&gt;
301+
&lt;span id="nested"&gt;...&lt;/span&gt;
302+
&lt;/&gt;
303+
&lt;/x-bar&gt;
297304
&lt;/&gt;
298305
&lt;/x-foo&gt;
299306
</pre>
300307
<p> For a stylesheet in the outer document,
301-
<span class=css data-link-type=maybe title="x-foo /shadow/ span">x-foo /shadow/ span</span> matches <span class=css data-link-type=maybe title=#top>#top</span>,
302-
but not <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
303-
because it’s not a <a data-link-type=dfn href=#top-level-element title="top-level element">top-level element</a> in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>.
304-
305-
<p> If one wanted to target <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
306-
one way to do it would be with <span class=css data-link-type=maybe title="x-foo /shadow/ div > span">x-foo /shadow/ div &gt; span</span>.
308+
the selector <span class=css data-link-type=maybe title="x-foo /shadow/ span">x-foo /shadow/ span</span>
309+
selects <span class=css data-link-type=maybe title=#top>#top</span> and <span class=css data-link-type=maybe title=#not-top>#not-top</span>.
310+
It does not match <span class=css data-link-type=maybe title=#nested>#nested</span>,
311+
as that element is further nested in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the <code>&lt;x-bar&gt;</code> component.
307312
</div>
308313

309-
<h3 class="heading settled heading" data-level=4.2 id=shadow-all-combinator><span class=secno>4.2 </span><span class=content>
310-
Selecting All Elements In A Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-shadow-all title=/shadow-all/>/shadow-all/</a> combinator</span><a class=self-link href=#shadow-all-combinator></a></h3>
314+
<h3 class="heading settled heading" data-level=4.2 id=shadow-child-combinator><span class=secno>4.2 </span><span class=content>
315+
Selecting the Top-level Elements in a Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-shadow-child title=/shadow-child/>/shadow-child/</a> combinator</span><a class=self-link href=#shadow-child-combinator></a></h3>
311316

312-
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow-all>/shadow-all/<a class=self-link href=#selectordef-shadow-all></a></dfn> combinator is encountered in a selector,
317+
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow-child>/shadow-child/<a class=self-link href=#selectordef-shadow-child></a></dfn> combinator is encountered in a selector,
313318
first filter the <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#selector-match-list title="selector match list">selector match list</a> to only include elements with <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>.
314319
Then replace every element in the <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#selector-match-list title="selector match list">selector match list</a>
315-
with the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> of each <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the element,
316-
and every element reachable by traversing any number of child lists
317-
from those elements.
320+
with the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> of each <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the element.
318321

319322
<div class=example>
320323
For example, say you had a component with a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> like the following:
@@ -325,21 +328,23 @@ <h3 class="heading settled heading" data-level=4.2 id=shadow-all-combinator><spa
325328
&lt;span id="not-top"&gt;...&lt;/span&gt;
326329
&lt;/div&gt;
327330
&lt;span id="top"&gt;...&lt;/span&gt;
328-
&lt;x-bar&gt;
329-
&lt;"shadow tree"&gt;
330-
&lt;span id="nested"&gt;...&lt;/span&gt;
331-
&lt;/&gt;
332-
&lt;/x-bar&gt;
333331
&lt;/&gt;
334332
&lt;/x-foo&gt;
335333
</pre>
336334
<p> For a stylesheet in the outer document,
337-
the selector <span class=css data-link-type=maybe title="x-foo /shadow-all/ span">x-foo /shadow-all/ span</span>
338-
selects <span class=css data-link-type=maybe title=#top>#top</span> and <span class=css data-link-type=maybe title=#not-top>#not-top</span>.
339-
It does not match <span class=css data-link-type=maybe title=#nested>#nested</span>,
340-
as that element is further nested in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> of the <code>&lt;x-bar&gt;</code> component.
335+
<span class=css data-link-type=maybe title="x-foo /shadow-child/ span">x-foo /shadow-child/ span</span> matches <span class=css data-link-type=maybe title=#top>#top</span>,
336+
but not <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
337+
because it’s not a <a data-link-type=dfn href=#top-level-element title="top-level element">top-level element</a> in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>.
338+
339+
<p> If one wanted to target <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
340+
one way to do it would be with <span class=css data-link-type=maybe title="x-foo /shadow-child/ div > span">x-foo /shadow-child/ div &gt; span</span>.
341341
</div>
342342

343+
<p class=issue id=issue-871fab96><a class=self-link href=#issue-871fab96></a>
344+
This isn’t ideal.
345+
Maybe don’t implement this one yet,
346+
because it’s a clumsy design.
347+
343348
<h3 class="heading settled heading" data-level=4.3 id=shadow-deep-combinator><span class=secno>4.3 </span><span class=content>
344349
Selecting Through All Shadows: the <a class=css data-link-type=maybe href=#selectordef-shadow-deep title=/shadow-deep/>/shadow-deep/</a> combinator</span><a class=self-link href=#shadow-deep-combinator></a></h3>
345350

@@ -661,7 +666,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
661666
<li>host element, <a href=#host-element0 title="section 2.1">2.1</a>
662667
<li>insertion point, <a href=#insertion-point title="section 2.2">2.2</a>
663668
<li>/shadow/, <a href=#selectordef-shadow title="section 4.1">4.1</a>
664-
<li>/shadow-all/, <a href=#selectordef-shadow-all title="section 4.2">4.2</a>
669+
<li>/shadow-child/, <a href=#selectordef-shadow-child title="section 4.2">4.2</a>
665670
<li>/shadow-deep/, <a href=#selectordef-shadow-deep title="section 4.3">4.3</a>
666671
<li>shadow host, <a href=#shadow-host title="section 2.1">2.1</a>
667672
<li>shadow tree, <a href=#shadow-tree title="section 2.1">2.1</a>
@@ -677,4 +682,9 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
677682
<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>
678683
I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
679684

680-
<a href=#issue-46cdc4d6> ↵ </a></div></div>
685+
<a href=#issue-46cdc4d6> ↵ </a></div><div class=issue>
686+
This isn’t ideal.
687+
Maybe don’t implement this one yet,
688+
because it’s a clumsy design.
689+
690+
<a href=#issue-871fab96> ↵ </a></div></div>

0 commit comments

Comments
 (0)