Skip to content

Commit 7e89fd5

Browse files
tabatkinstabatkins
committed
[shadow-styling] /content/ -> ::content, per Polymer feedback.
1 parent c34817b commit 7e89fd5

2 files changed

Lines changed: 105 additions & 68 deletions

File tree

‎shadow-styling/Overview.bs‎

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ 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.
1010
Ignored Terms: content, shadowroot
11+
Link Defaults: selectors (dfn) child combinator
1112
</pre>
1213

1314
<h2 id="intro">
@@ -217,39 +218,6 @@ Selecting Through All Shadows: the ''/shadow-deep/'' combinator</h3>
217218
''#top'', ''#not-top'', <em>and</em> ''#nested''.
218219
</div>
219220

220-
<h3 id='content-combinator'>
221-
Selecting Distributed Elements: the ''/content/'' combinator</h3>
222-
223-
When a <dfn selector>/content/</dfn> combinator is encountered in a selector,
224-
first filter the <a>selector match list</a> to only include elements with <a>distribution lists</a>.
225-
Then replace every element in the <a>selector match list</a>
226-
with the elements in the <a>distribution list</a> of each element.
227-
228-
<div class="example">
229-
For example, say you had a component with both children and a shadow tree,
230-
like the following:
231-
232-
<pre>
233-
&lt;x-foo>
234-
&lt;div id="one">...&lt;/div>
235-
&lt;div id="two">...&lt;/div>
236-
&lt;div id="three">
237-
&lt;div id="four">...&lt;/div>
238-
&lt;/div>
239-
&lt;"shadow tree">
240-
&lt;div id="five">...&lt;/div>
241-
&lt;div id="six">...&lt;/div>
242-
&lt;content select=":nth-child(odd)">&lt;/content>
243-
&lt;/"shadow tree">
244-
&lt;/x-foo>
245-
</pre>
246-
247-
For a stylesheet within the <a>shadow tree</a>,
248-
a selector like ''* /content/ div''
249-
selects ''#one'' and ''#three'',
250-
as they're the elements distributed by the <code>&lt;content></code> element.
251-
</div>
252-
253221
<h2 id='selectors'>
254222
Shadow DOM Selectors</h2>
255223

@@ -385,3 +353,54 @@ Selecting the Shadow Root Itself: the ''::shadow'' pseudo-element</h3>
385353
a selector like '':host::shadow div'' selects the <a element>div</a> elements in <em>all</em> the <a>shadow trees</a> on the element,
386354
not just the one containing that selector.
387355
</div>
356+
357+
358+
359+
<h3 id='content-combinator'>
360+
Selecting Distributed Elements: the ''::content'' pseudo-element</h3>
361+
362+
The <dfn selector>::content</dfn> pseudo-element matches the <a>distribution list</a> itself,
363+
on elements that have one.
364+
365+
The ''::content'' pseudo-element must not generate boxes,
366+
unless specified otherwise in another specification.
367+
However, for the purpose of Selectors,
368+
the ''::content'' pseudo-element is considered to be the parent of the elements in the <a>distribution list</a>.
369+
370+
<div class="example">
371+
For example, say you had a component with both children and a shadow tree,
372+
like the following:
373+
374+
<pre>
375+
&lt;x-foo>
376+
&lt;div id="one" class="foo">...&lt;/div>
377+
&lt;div id="two">...&lt;/div>
378+
&lt;div id="three" class="foo">
379+
&lt;div id="four">...&lt;/div>
380+
&lt;/div>
381+
&lt;"shadow tree">
382+
&lt;div id="five">...&lt;/div>
383+
&lt;div id="six">...&lt;/div>
384+
&lt;content select=".foo">&lt;/content>
385+
&lt;/"shadow tree">
386+
&lt;/x-foo>
387+
</pre>
388+
389+
For a stylesheet within the <a>shadow tree</a>,
390+
a selector like ''::content div''
391+
selects ''#one'', ''#three'', and ''#four'',
392+
as they're the elements distributed by the sole <a element>content</a> element,
393+
but not ''#two''.
394+
395+
If only the <a>top-level elements</a> distributed the <a element>content</a> element are desired,
396+
a <a>child combinator</a> can be used,
397+
like ''::content > div'',
398+
which will exclude ''#four''
399+
as it's not treated as a child of the ''::content'' pseudo-element.
400+
401+
Note: Note that a selector like ''::content div''
402+
is equivalent to ''*::content div'',
403+
where the ''*'' selects many more elements that just the <a element>content</a> element.
404+
However, since only the <a element>content</a> element has a <a>distribution list</a>,
405+
it's the only element that has a ''::content'' pseudo-element as well.
406+
</div>

‎shadow-styling/Overview.html‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -119,13 +119,13 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
119119
<li><a href=#inheritance0><span class=secno>4.1</span> Inheritance and Shadow DOM</a></ul>
120120
<li><a href=#inheritance><span class=secno>5</span> Shadow DOM Combinators</a>
121121
<ul class=toc>
122-
<li><a href=#shadow-deep-combinator><span class=secno>5.1</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>5.2</span> Selecting Distributed Elements: the <span class=css data-link-type=maybe title=/content/>/content/</span> combinator</a></ul>
122+
<li><a href=#shadow-deep-combinator><span class=secno>5.1</span> Selecting Through All Shadows: the <span class=css data-link-type=maybe title=/shadow-deep/>/shadow-deep/</span> combinator</a></ul>
124123
<li><a href=#selectors><span class=secno>6</span> Shadow DOM Selectors</a>
125124
<ul class=toc>
126125
<li><a href=#host-selector><span class=secno>6.1</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>
127126
<li><a href=#ancestor-selector><span class=secno>6.2</span> Selecting Based on an Ancestor Outside the Shadow Tree: the <span class=css data-link-type=maybe title=:host-context()>:host-context()</span> pseudo-class</a>
128-
<li><a href=#shadow-pseudoelement><span class=secno>6.3</span> Selecting the Shadow Root Itself: the <span class=css data-link-type=maybe title=::shadow>::shadow</span> pseudo-element</a></ul>
127+
<li><a href=#shadow-pseudoelement><span class=secno>6.3</span> Selecting the Shadow Root Itself: the <span class=css data-link-type=maybe title=::shadow>::shadow</span> pseudo-element</a>
128+
<li><a href=#content-combinator><span class=secno>6.4</span> Selecting Distributed Elements: the <span class=css data-link-type=maybe title=::content>::content</span> pseudo-element</a></ul>
129129
<li><a href=#conformance><span class=secno></span> Conformance</a>
130130
<ul class=toc>
131131
<li><a href=#conventions><span class=secno></span> Document conventions</a>
@@ -348,37 +348,6 @@ <h3 class="heading settled heading" data-level=5.1 id=shadow-deep-combinator><sp
348348
<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>.
349349
</div>
350350

351-
<h3 class="heading settled heading" data-level=5.2 id=content-combinator><span class=secno>5.2 </span><span class=content>
352-
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>
353-
354-
<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,
355-
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=#distribution-list title="distribution lists">distribution lists</a>.
356-
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>
357-
with the elements in the <a data-link-type=dfn href=#distribution-list title="distribution list">distribution list</a> of each element.
358-
359-
<div class=example>
360-
For example, say you had a component with both children and a shadow tree,
361-
like the following:
362-
363-
<pre> &lt;x-foo&gt;
364-
&lt;div id="one"&gt;...&lt;/div&gt;
365-
&lt;div id="two"&gt;...&lt;/div&gt;
366-
&lt;div id="three"&gt;
367-
&lt;div id="four"&gt;...&lt;/div&gt;
368-
&lt;/div&gt;
369-
&lt;"shadow tree"&gt;
370-
&lt;div id="five"&gt;...&lt;/div&gt;
371-
&lt;div id="six"&gt;...&lt;/div&gt;
372-
&lt;content select=":nth-child(odd)"&gt;&lt;/content&gt;
373-
&lt;/"shadow tree"&gt;
374-
&lt;/x-foo&gt;
375-
</pre>
376-
<p> For a stylesheet within the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
377-
a selector like <span class=css data-link-type=maybe title="* /content/ div">* /content/ div</span>
378-
selects <span class=css data-link-type=maybe title=#one>#one</span> and <span class=css data-link-type=maybe title=#three>#three</span>,
379-
as they’re the elements distributed by the <code>&lt;content&gt;</code> element.
380-
</div>
381-
382351
<h2 class="heading settled heading" data-level=6 id=selectors><span class=secno>6 </span><span class=content>
383352
Shadow DOM Selectors</span><a class=self-link href=#selectors></a></h2>
384353

@@ -509,6 +478,55 @@ <h3 class="heading settled heading" data-level=6.3 id=shadow-pseudoelement><span
509478
not just the one containing that selector.
510479
</div>
511480

481+
482+
483+
<h3 class="heading settled heading" data-level=6.4 id=content-combinator><span class=secno>6.4 </span><span class=content>
484+
Selecting Distributed Elements: the <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element</span><a class=self-link href=#content-combinator></a></h3>
485+
486+
<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,
487+
on elements that have one.
488+
489+
<p> The <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element must not generate boxes,
490+
unless specified otherwise in another specification.
491+
However, for the purpose of Selectors,
492+
the <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element is considered to be the parent of the elements in the <a data-link-type=dfn href=#distribution-list title="distribution list">distribution list</a>.
493+
494+
<div class=example>
495+
For example, say you had a component with both children and a shadow tree,
496+
like the following:
497+
498+
<pre> &lt;x-foo&gt;
499+
&lt;div id="one" class="foo"&gt;...&lt;/div&gt;
500+
&lt;div id="two"&gt;...&lt;/div&gt;
501+
&lt;div id="three" class="foo"&gt;
502+
&lt;div id="four"&gt;...&lt;/div&gt;
503+
&lt;/div&gt;
504+
&lt;"shadow tree"&gt;
505+
&lt;div id="five"&gt;...&lt;/div&gt;
506+
&lt;div id="six"&gt;...&lt;/div&gt;
507+
&lt;content select=".foo"&gt;&lt;/content&gt;
508+
&lt;/"shadow tree"&gt;
509+
&lt;/x-foo&gt;
510+
</pre>
511+
<p> For a stylesheet within the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
512+
a selector like <span class=css data-link-type=maybe title="::content div">::content div</span>
513+
selects <span class=css data-link-type=maybe title=#one>#one</span>, <span class=css data-link-type=maybe title=#three>#three</span>, and <span class=css data-link-type=maybe title=#four>#four</span>,
514+
as they’re the elements distributed by the sole <a data-link-type=element title=content>content</a> element,
515+
but not <span class=css data-link-type=maybe title=#two>#two</span>.
516+
517+
<p> If only the <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> distributed the <a data-link-type=element title=content>content</a> element are desired,
518+
a <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#child-combinator title="child combinator">child combinator</a> can be used,
519+
like <span class=css data-link-type=maybe title="::content > div">::content &gt; div</span>,
520+
which will exclude <span class=css data-link-type=maybe title=#four>#four</span>
521+
as it’s not treated as a child of the <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element.
522+
523+
<p class=note> Note: Note that a selector like <span class=css data-link-type=maybe title="::content div">::content div</span>
524+
is equivalent to <span class=css data-link-type=maybe title="*::content div">*::content div</span>,
525+
where the <span class=css data-link-type=maybe title=*>*</span> selects many more elements that just the <a data-link-type=element title=content>content</a> element.
526+
However, since only the <a data-link-type=element title=content>content</a> element has a <a data-link-type=dfn href=#distribution-list title="distribution list">distribution list</a>,
527+
it’s the only element that has a <a class=css data-link-type=maybe href=#selectordef-content title=::content>::content</a> pseudo-element as well.
528+
</div>
529+
512530
<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
513531
Conformance</span><a class=self-link href=#conformance></a></h2>
514532

@@ -644,7 +662,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
644662
Index</span><a class=self-link href=#index></a></h2>
645663
<div data-fill-with=index><ul class=indexlist>
646664
<li>active shadow tree, <a href=#active-shadow-tree title="section 2.1">2.1</a>
647-
<li>/content/, <a href=#selectordef-content title="section 5.2">5.2</a>
665+
<li>::content, <a href=#selectordef-content title="section 6.4">6.4</a>
648666
<li>distribution list, <a href=#distribution-list title="section 2.2">2.2</a>
649667
<li>:host(), <a href=#selectordef-host title="section 6.1">6.1</a>
650668
<li>:host, <a href=#selectordef-host0 title="section 6.1">6.1</a>

0 commit comments

Comments
 (0)