[shadow-styling] Kill the /shadow/ section, stick with ::shadow.

Author: tabatkins

shadow-styling/Overview.bs

@@ -184,52 +184,6 @@ Shadow DOM Combinators</h2>
 	<p class='issue'>
 		I'm assuming here that "/foo/" is the syntax we'll agree on for named combinators.
 
-<h3 id='shadow-combinator'>
-Selecting Into A Shadow Tree: the ''/shadow/'' combinator</h3>
-
-	When a <dfn selector>/shadow/</dfn> combinator is encountered in a selector,
-	first filter the <a>selector match list</a> to only include elements with <a>shadow trees</a>.
-	Then replace every element in the <a>selector match list</a>
-	with the <a>top-level elements</a> of each <a>shadow tree</a> of the element,
-	and every element reachable by traversing any number of child lists
-	from those elements.
-
-	<div class='example'>
-		For example, say you had a component with a <a>shadow tree</a> like the following:
-
-		<pre>
-			&lt;x-foo>
-				&lt;"shadow tree">
-					&lt;div>
-						&lt;span id="not-top">...&lt;/span>
-					&lt;/div>
-					&lt;span id="top">...&lt;/span>
-					&lt;x-bar>
-						&lt;"shadow tree">
-							&lt;span id="nested">...&lt;/span>
-						&lt;/>
-					&lt;/x-bar>
-				&lt;/>
-			&lt;/x-foo>
-		</pre>
-
-		For a stylesheet in the outer document,
-		the selector ''x-foo /shadow/ span''
-		selects ''#top'' and ''#not-top''.
-		It does not match ''#nested'',
-		as that element is further nested in the <a>shadow tree</a> of the <code>&lt;x-bar></code> component.
-	</div>
-
-	<div class='example'>
-		If an element has multiple <a>shadow trees</a>,
-		a selector using ''/shadow/'' targets the elements in <em>all</em> of them.
-
-		Similarly,
-		inside of a <a>shadow tree</a>,
-		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,
-		not just the one containing that selector.
-	</div>
-
 <h3 id='shadow-deep-combinator'>
 Selecting Through All Shadows: the ''/shadow-deep/'' combinator</h3>
 
@@ -421,3 +375,13 @@ Selecting the Shadow Root Itself: the ''::shadow'' pseudo-element</h3>
 		like ''x-foo /shadow/ span'',
 		to select all the elements of some type in the <a>shadow tree</a>.
 	</div>
+
+	<div class='example'>
+		If an element has multiple <a>shadow trees</a>,
+		a ''::shadow'' pseudo-element selects <em>all</em> of the corresponding <a>shadow roots</a>.
+
+		Similarly,
+		inside of a <a>shadow tree</a>,
+		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,
+		not just the one containing that selector.
+	</div>

shadow-styling/Overview.html

@@ -119,9 +119,8 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 		<li><a href=#inheritance0><span class=secno>4.1</span> Inheritance and Shadow DOM</a></ul>
 	<li><a href=#inheritance><span class=secno>5</span> Shadow DOM Combinators</a>
 		<ul class=toc>
-		<li><a href=#shadow-combinator><span class=secno>5.1</span> Selecting Into A Shadow Tree: the <span class=css data-link-type=maybe title=/shadow/>/shadow/</span> combinator</a>
-		<li><a href=#shadow-deep-combinator><span class=secno>5.2</span> Selecting Through All Shadows: the <span class=css data-link-type=maybe title=/shadow-deep/>/shadow-deep/</span> combinator</a>
-		<li><a href=#content-combinator><span class=secno>5.3</span> Selecting Distributed Elements: the <span class=css data-link-type=maybe title=/content/>/content/</span> combinator</a></ul>
+		<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>
+		<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>
 	<li><a href=#selectors><span class=secno>6</span> Shadow DOM Selectors</a>
 		<ul class=toc>
 		<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>
@@ -318,51 +317,7 @@ <h2 class="heading settled heading" data-level=5 id=inheritance><span class=secn
 	<p class=issue id=issue-46cdc4d6><a class=self-link href=#issue-46cdc4d6></a>
 		I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
 
-<h3 class="heading settled heading" data-level=5.1 id=shadow-combinator><span class=secno>5.1 </span><span class=content>
-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>
-
-<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,
-	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>.
-	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>
-	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,
-	and every element reachable by traversing any number of child lists
-	from those elements.
-
-	<div class=example>
-		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:
-
-		<pre>  &lt;x-foo&gt;
-    &lt;"shadow tree"&gt;
-      &lt;div&gt;
-        &lt;span id="not-top"&gt;...&lt;/span&gt;
-      &lt;/div&gt;
-      &lt;span id="top"&gt;...&lt;/span&gt;
-      &lt;x-bar&gt;
-        &lt;"shadow tree"&gt;
-          &lt;span id="nested"&gt;...&lt;/span&gt;
-        &lt;/&gt;
-      &lt;/x-bar&gt;
-    &lt;/&gt;
-  &lt;/x-foo&gt;
-</pre>
-<p>		For a stylesheet in the outer document,
-		the selector <span class=css data-link-type=maybe title="x-foo /shadow/ span">x-foo /shadow/ span</span>
-		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>.
-		It does not match <span class=css data-link-type=maybe title=#nested>#nested</span>,
-		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.
-	</div>
-
-	<div class=example>
-		If an element has multiple <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>,
-		a selector using <a class=css data-link-type=maybe href=#selectordef-shadow0 title=/shadow/>/shadow/</a> targets the elements in <em>all</em> of them.
-
-<p>		Similarly,
-		inside of a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
-		a selector like <span class=css data-link-type=maybe title=":host /shadow/ div">:host /shadow/ div</span> selects the <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-div-element title=div>div</a> elements in <em>all</em> the <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a> on the element,
-		not just the one containing that selector.
-	</div>
-
-<h3 class="heading settled heading" data-level=5.2 id=shadow-deep-combinator><span class=secno>5.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=5.1 id=shadow-deep-combinator><span class=secno>5.1 </span><span class=content>
 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>
 
 <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,
@@ -393,7 +348,7 @@ <h3 class="heading settled heading" data-level=5.2 id=shadow-deep-combinator><sp
 		<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>.
 	</div>
 
-<h3 class="heading settled heading" data-level=5.3 id=content-combinator><span class=secno>5.3 </span><span class=content>
+<h3 class="heading settled heading" data-level=5.2 id=content-combinator><span class=secno>5.2 </span><span class=content>
 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>
 
 <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,
@@ -539,11 +494,21 @@ <h3 class="heading settled heading" data-level=6.3 id=shadow-pseudoelement><span
 <p>		If one wanted to target <span class=css data-link-type=maybe title=#not-top>#not-top</span>,
 		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>.
 		However, this introduces a strong dependency on the internal structure of the component;
-		in most cases, it’s better to use the <a class=css data-link-type=maybe href=#selectordef-shadow0 title=/shadow/>/shadow/</a> combinator,
+		in most cases, it’s better to use the <span class=css data-link-type=maybe title=/shadow/>/shadow/</span> combinator,
 		like <span class=css data-link-type=maybe title="x-foo /shadow/ span">x-foo /shadow/ span</span>,
 		to select all the elements of some type in the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>.
 	</div>
 
+	<div class=example>
+		If an element has multiple <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>,
+		a <a class=css data-link-type=maybe href=#selectordef-shadow title=::shadow>::shadow</a> pseudo-element selects <em>all</em> of the corresponding <a data-link-type=dfn href=#shadow-root title="shadow roots">shadow roots</a>.
+
+<p>		Similarly,
+		inside of a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
+		a selector like <span class=css data-link-type=maybe title=":host::shadow div">:host::shadow div</span> selects the <a data-link-type=element href=http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-div-element title=div>div</a> elements in <em>all</em> the <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a> on the element,
+		not just the one containing that selector.
+	</div>
+
 <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
 Conformance</span><a class=self-link href=#conformance></a></h2>
 
@@ -680,15 +645,14 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <div data-fill-with=index><ul class=indexlist>
 <li>active shadow tree, <a href=#active-shadow-tree title="section 2.1">2.1</a>
 <li>:ancestor(), <a href=#selectordef-ancestor title="section 6.2">6.2</a>
-<li>/content/, <a href=#selectordef-content title="section 5.3">5.3</a>
+<li>/content/, <a href=#selectordef-content title="section 5.2">5.2</a>
 <li>distribution list, <a href=#distribution-list title="section 2.2">2.2</a>
 <li>:host(), <a href=#selectordef-host title="section 6.1">6.1</a>
 <li>:host, <a href=#selectordef-host0 title="section 6.1">6.1</a>
 <li>host element, <a href=#host-element0 title="section 2.1">2.1</a>
 <li>insertion point, <a href=#insertion-point title="section 2.2">2.2</a>
 <li>::shadow, <a href=#selectordef-shadow title="section 6.3">6.3</a>
-<li>/shadow/, <a href=#selectordef-shadow0 title="section 5.1">5.1</a>
-<li>/shadow-deep/, <a href=#selectordef-shadow-deep title="section 5.2">5.2</a>
+<li>/shadow-deep/, <a href=#selectordef-shadow-deep title="section 5.1">5.1</a>
 <li>shadow host, <a href=#shadow-host title="section 2.1">2.1</a>
 <li>shadow root, <a href=#shadow-root title="section 2.1">2.1</a>
 <li>shadow tree, <a href=#shadow-tree title="section 2.1">2.1</a>