Skip to content

Commit fd659ec

Browse files
tabatkinstabatkins
committed
[shadow-styling] Remove /shadow-child/, add ::shadow.
1 parent 45dc447 commit fd659ec

2 files changed

Lines changed: 92 additions & 89 deletions

File tree

‎shadow-styling/Overview.bs‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Status: ED
77
ED: http://dev.w3.org/csswg/shadow-styling
88
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
99
Abstract: This specification defines the additions to CSS to accommodate Shadow DOM styling.
10-
Ignored Terms: content
10+
Ignored Terms: content, shadowroot
1111
</pre>
1212

1313
<h2 id="intro">
@@ -179,42 +179,6 @@ Selecting Into A Shadow Tree: the ''/shadow/'' combinator</h3>
179179
as that element is further nested in the <a>shadow tree</a> of the <code>&lt;x-bar></code> component.
180180
</div>
181181

182-
<h3 id='shadow-child-combinator'>
183-
Selecting the Top-level Elements in a Shadow Tree: the ''/shadow-child/'' combinator</h3>
184-
185-
When a <dfn selector>/shadow-child/</dfn> combinator is encountered in a selector,
186-
first filter the <a>selector match list</a> to only include elements with <a>shadow trees</a>.
187-
Then replace every element in the <a>selector match list</a>
188-
with the <a>top-level elements</a> of each <a>shadow tree</a> of the element.
189-
190-
<div class='example'>
191-
For example, say you had a component with a <a>shadow tree</a> like the following:
192-
193-
<pre>
194-
&lt;x-foo>
195-
&lt;"shadow tree">
196-
&lt;div>
197-
&lt;span id="not-top">...&lt;/span>
198-
&lt;/div>
199-
&lt;span id="top">...&lt;/span>
200-
&lt;/>
201-
&lt;/x-foo>
202-
</pre>
203-
204-
For a stylesheet in the outer document,
205-
''x-foo /shadow-child/ span'' matches ''#top'',
206-
but not ''#not-top'',
207-
because it's not a <a>top-level element</a> in the <a>shadow tree</a>.
208-
209-
If one wanted to target ''#not-top'',
210-
one way to do it would be with ''x-foo /shadow-child/ div > span''.
211-
</div>
212-
213-
<p class='issue'>
214-
This isn't ideal.
215-
Maybe don't implement this one yet,
216-
because it's a clumsy design.
217-
218182
<h3 id='shadow-deep-combinator'>
219183
Selecting Through All Shadows: the ''/shadow-deep/'' combinator</h3>
220184

@@ -390,6 +354,46 @@ Selecting Based on an Ancestor Outside the Shadow Tree: the '':ancestor()'' pseu
390354
looking for elements that match its argument,
391355
until it reaches the document root.
392356

357+
<h3 id='shadow-pseudoelement'>
358+
Selecting the Shadow Root Itself: the ''::shadow'' pseudo-element</h3>
359+
360+
If an element has at least one <a>shadow tree</a>,
361+
the <dfn>::shadow</dfn> pseudo-element selects the <a>shadow trees</a> themselves.
362+
In HTML, the <a>shadow tree</a> is represented by <a interface>ShadowRoot</a> objects.
363+
364+
The ''::shadow'' pseudo-element must not generate boxes,
365+
unless specified otherwise in another specification.
366+
However, for the purpose of Selectors,
367+
the ''::shadow'' pseudo-element is considered to be the root of the <a>shadow tree</a>,
368+
with the <a>top-level elements</a> in the <a>shadow tree</a> the direct children of the ''::shadow'' pseudo-element.
369+
370+
<div class='example'>
371+
For example, say you had a component with a <a>shadow tree</a> like the following:
372+
373+
<pre>
374+
&lt;x-foo>
375+
&lt;"shadow tree">
376+
&lt;div>
377+
&lt;span id="not-top">...&lt;/span>
378+
&lt;/div>
379+
&lt;span id="top">...&lt;/span>
380+
&lt;/>
381+
&lt;/x-foo>
382+
</pre>
383+
384+
For a stylesheet in the outer document,
385+
''x-foo::shadow > span'' matches ''#top'',
386+
but not ''#not-top'',
387+
because it's not a <a>top-level element</a> in the <a>shadow tree</a>.
388+
389+
If one wanted to target ''#not-top'',
390+
one way to do it would be with ''x-foo::shadow > div > span''.
391+
However, this introduces a strong dependency on the internal structure of the component;
392+
in most cases, it's better to use the ''/shadow/'' combinator,
393+
like ''x-foo /shadow/ span'',
394+
to select all the elements of some type in the <a>shadow tree</a>.
395+
</div>
396+
393397
<h2 id='cascading'>
394398
Changes to the Cascading Model</h2>
395399

‎shadow-styling/Overview.html‎

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -118,14 +118,14 @@ <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-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>
122-
<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>
123-
<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>
121+
<li><a href=#shadow-deep-combinator><span class=secno>4.2</span> Selecting Through All Shadows: the <span class=css data-link-type=maybe title=/shadow-deep/>/shadow-deep/</span> combinator</a>
122+
<li><a href=#content-combinator><span class=secno>4.3</span> Selecting Distributed Elements: the <span class=css data-link-type=maybe title=/content/>/content/</span> combinator</a></ul>
124123
<li><a href=#selectors><span class=secno>5</span> Shadow DOM Selectors</a>
125124
<ul class=toc>
126125
<li><a href=#top-selector><span class=secno>5.1</span> Selecting Root-like Elements: the <span class=css data-link-type=maybe title=:top>:top</span> pseudo-class</a>
127126
<li><a href=#host-selector><span class=secno>5.2</span> Selecting the Host Element: the <span class=css data-link-type=maybe title=:host>:host</span> and <span class=css data-link-type=maybe title=:host()>:host()</span> pseudo-classes</a>
128-
<li><a href=#ancestor-selector><span class=secno>5.3</span> Selecting Based on an Ancestor Outside the Shadow Tree: the <span class=css data-link-type=maybe title=:ancestor()>:ancestor()</span> pseudo-class</a></ul>
127+
<li><a href=#ancestor-selector><span class=secno>5.3</span> Selecting Based on an Ancestor Outside the Shadow Tree: the <span class=css data-link-type=maybe title=:ancestor()>:ancestor()</span> pseudo-class</a>
128+
<li><a href=#shadow-pseudoelement><span class=secno>5.4</span> Selecting the Shadow Root Itself: the <span class=css data-link-type=maybe title=::shadow>::shadow</span> pseudo-element</a></ul>
129129
<li><a href=#cascading><span class=secno>6</span> Changes to the Cascading Model</a>
130130
<li><a href=#conformance><span class=secno></span> Conformance</a>
131131
<ul class=toc>
@@ -278,9 +278,9 @@ <h2 class="heading settled heading" data-level=4 id=inheritance><span class=secn
278278
I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
279279

280280
<h3 class="heading settled heading" data-level=4.1 id=shadow-combinator><span class=secno>4.1 </span><span class=content>
281-
Selecting Into A Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-shadow title=/shadow/>/shadow/</a> combinator</span><a class=self-link href=#shadow-combinator></a></h3>
281+
Selecting Into A Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-shadow0 title=/shadow/>/shadow/</a> combinator</span><a class=self-link href=#shadow-combinator></a></h3>
282282

283-
<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,
283+
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow0>/shadow/<a class=self-link href=#selectordef-shadow0></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>
286286
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,
@@ -311,41 +311,7 @@ <h3 class="heading settled heading" data-level=4.1 id=shadow-combinator><span cl
311311
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.
312312
</div>
313313

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>
316-
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,
318-
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>.
319-
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>
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.
321-
322-
<div class=example>
323-
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:
324-
325-
<pre> &lt;x-foo&gt;
326-
&lt;"shadow tree"&gt;
327-
&lt;div&gt;
328-
&lt;span id="not-top"&gt;...&lt;/span&gt;
329-
&lt;/div&gt;
330-
&lt;span id="top"&gt;...&lt;/span&gt;
331-
&lt;/&gt;
332-
&lt;/x-foo&gt;
333-
</pre>
334-
<p> For a stylesheet in the outer document,
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>.
341-
</div>
342-
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-
348-
<h3 class="heading settled heading" data-level=4.3 id=shadow-deep-combinator><span class=secno>4.3 </span><span class=content>
314+
<h3 class="heading settled heading" data-level=4.2 id=shadow-deep-combinator><span class=secno>4.2 </span><span class=content>
349315
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>
350316

351317
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow-deep>/shadow-deep/<a class=self-link href=#selectordef-shadow-deep></a></dfn> combinator is encountered in a selector,
@@ -376,7 +342,7 @@ <h3 class="heading settled heading" data-level=4.3 id=shadow-deep-combinator><sp
376342
<span class=css data-link-type=maybe title=#top>#top</span>, <span class=css data-link-type=maybe title=#not-top>#not-top</span>, <em>and</em> <span class=css data-link-type=maybe title=#nested>#nested</span>.
377343
</div>
378344

379-
<h3 class="heading settled heading" data-level=4.4 id=content-combinator><span class=secno>4.4 </span><span class=content>
345+
<h3 class="heading settled heading" data-level=4.3 id=content-combinator><span class=secno>4.3 </span><span class=content>
380346
Selecting Distributed Elements: the <a class=css data-link-type=maybe href=#selectordef-content title=/content/>/content/</a> combinator</span><a class=self-link href=#content-combinator></a></h3>
381347

382348
<p> When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-content>/content/<a class=self-link href=#selectordef-content></a></dfn> combinator is encountered in a selector,
@@ -512,6 +478,44 @@ <h3 class="heading settled heading" data-level=5.3 id=ancestor-selector><span cl
512478
looking for elements that match its argument,
513479
until it reaches the document root.
514480

481+
<h3 class="heading settled heading" data-level=5.4 id=shadow-pseudoelement><span class=secno>5.4 </span><span class=content>
482+
Selecting the Shadow Root Itself: the <a class=css data-link-type=maybe href=#selectordef-shadow title=::shadow>::shadow</a> pseudo-element</span><a class=self-link href=#shadow-pseudoelement></a></h3>
483+
484+
<p> If an element has at least one <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
485+
the <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-shadow>::shadow<a class=self-link href=#selectordef-shadow></a></dfn> pseudo-element selects the <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a> themselves.
486+
In HTML, the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> is represented by <a class=idl-code data-link-type=interface title=shadowroot>ShadowRoot</a> objects.
487+
488+
<p> The <a class=css data-link-type=maybe href=#selectordef-shadow title=::shadow>::shadow</a> pseudo-element must not generate boxes,
489+
unless specified otherwise in another specification.
490+
However, for the purpose of Selectors,
491+
the <a class=css data-link-type=maybe href=#selectordef-shadow title=::shadow>::shadow</a> pseudo-element is considered to be the root of the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
492+
with the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> the direct children of the <a class=css data-link-type=maybe href=#selectordef-shadow title=::shadow>::shadow</a> pseudo-element.
493+
494+
<div class=example>
495+
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:
496+
497+
<pre> &lt;x-foo&gt;
498+
&lt;"shadow tree"&gt;
499+
&lt;div&gt;
500+
&lt;span id="not-top"&gt;...&lt;/span&gt;
501+
&lt;/div&gt;
502+
&lt;span id="top"&gt;...&lt;/span&gt;
503+
&lt;/&gt;
504+
&lt;/x-foo&gt;
505+
</pre>
506+
<p> For a stylesheet in the outer document,
507+
<span class=css data-link-type=maybe title="x-foo::shadow > span">x-foo::shadow &gt; span</span> matches <span class=css data-link-type=maybe title=#top>#top</span>,
508+
but not <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
509+
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>.
510+
511+
<p> If one wanted to target <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
512+
one way to do it would be with <span class=css data-link-type=maybe title="x-foo::shadow > div > span">x-foo::shadow &gt; div &gt; span</span>.
513+
However, this introduces a strong dependency on the internal structure of the component;
514+
in most cases, it’s better to use the <a class=css data-link-type=maybe href=#selectordef-shadow0 title=/shadow/>/shadow/</a> combinator,
515+
like <span class=css data-link-type=maybe title="x-foo /shadow/ span">x-foo /shadow/ span</span>,
516+
to select all the elements of some type in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>.
517+
</div>
518+
515519
<h2 class="heading settled heading" data-level=6 id=cascading><span class=secno>6 </span><span class=content>
516520
Changes to the Cascading Model</span><a class=self-link href=#cascading></a></h2>
517521

@@ -659,15 +663,15 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
659663
<div data-fill-with=index><ul class=indexlist>
660664
<li>active shadow tree, <a href=#active-shadow-tree title="section 2.1">2.1</a>
661665
<li>:ancestor(), <a href=#selectordef-ancestor title="section 5.3">5.3</a>
662-
<li>/content/, <a href=#selectordef-content title="section 4.4">4.4</a>
666+
<li>/content/, <a href=#selectordef-content title="section 4.3">4.3</a>
663667
<li>distribution list, <a href=#distribution-list title="section 2.2">2.2</a>
664668
<li>:host(), <a href=#selectordef-host title="section 5.2">5.2</a>
665669
<li>:host, <a href=#selectordef-host0 title="section 5.2">5.2</a>
666670
<li>host element, <a href=#host-element0 title="section 2.1">2.1</a>
667671
<li>insertion point, <a href=#insertion-point title="section 2.2">2.2</a>
668-
<li>/shadow/, <a href=#selectordef-shadow title="section 4.1">4.1</a>
669-
<li>/shadow-child/, <a href=#selectordef-shadow-child title="section 4.2">4.2</a>
670-
<li>/shadow-deep/, <a href=#selectordef-shadow-deep title="section 4.3">4.3</a>
672+
<li>::shadow, <a href=#selectordef-shadow title="section 5.4">5.4</a>
673+
<li>/shadow/, <a href=#selectordef-shadow0 title="section 4.1">4.1</a>
674+
<li>/shadow-deep/, <a href=#selectordef-shadow-deep title="section 4.2">4.2</a>
671675
<li>shadow host, <a href=#shadow-host title="section 2.1">2.1</a>
672676
<li>shadow tree, <a href=#shadow-tree title="section 2.1">2.1</a>
673677
<li>:top, <a href=#selectordef-top title="section 5.1">5.1</a>
@@ -682,9 +686,4 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
682686
<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>
683687
I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
684688

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>
689+
<a href=#issue-46cdc4d6> ↵ </a></div></div>

0 commit comments

Comments
 (0)