[shadow-styling] /shadow-deep/ -> /deep/, move it aorund in the document.

Author: tabatkins

shadow-styling/Overview.bs

@@ -185,39 +185,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-deep-combinator'>
-Selecting Through All Shadows: the ''/shadow-deep/'' combinator</h3>
-
-	When a <dfn selector>/shadow-deep/</dfn> combinator is encountered in a selector,
-	replace every element in the <a>selector match list</a>
-	with every element reachable from the original element
-	by traversing any number of child lists or shadow trees.
-
-	<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-deep/ span''
-		selects all three of <code>&lt;span></code> elements:
-		''#top'', ''#not-top'', <em>and</em> ''#nested''.
-	</div>
-
 <h2 id='selectors'>
 Shadow DOM Selectors</h2>
 
@@ -404,3 +371,45 @@ Selecting Distributed Elements: the ''::content'' pseudo-element</h3>
 		However, since only the <a element>content</a> element has a <a>distribution list</a>,
 		it's the only element that has a ''::content'' pseudo-element as well.
 	</div>
+
+
+<h3 id='deep-combinator'>
+Selecting Through All Shadows: the ''/deep/'' combinator</h3>
+
+	When a <dfn selector>/deep/</dfn> combinator is encountered in a selector,
+	replace every element in the <a>selector match list</a>
+	with every element reachable from the original element
+	by traversing any number of child lists or shadow trees.
+
+	<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 /deep/ span''
+		selects all three of <code>&lt;span></code> elements:
+		''#top'', ''#not-top'', <em>and</em> ''#nested''.
+	</div>
+
+	<p class='issue'>
+		This is basically a super-descendant combinator.
+		If the descendant combinator had a real glyph,
+		it would potentially be interesting to just double it.
+		Maybe we can give the descendant combinator a pseudonym of ''>>'',
+		as it itself is a super-child combinator?
+		Then ''/deep/'' could be spelled ''>>>''

shadow-styling/Overview.html

@@ -118,14 +118,13 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 		<ul class=toc>
 		<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-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>
 	<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>
 		<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>
 		<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>
-		<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>
+		<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>
+		<li><a href=#deep-combinator><span class=secno>6.5</span> Selecting Through All Shadows: the <span class=css data-link-type=maybe title=/deep/>/deep/</span> combinator</a></ul>
 	<li><a href=#conformance><span class=secno></span> Conformance</a>
 		<ul class=toc>
 		<li><a href=#conventions><span class=secno></span> Document conventions</a>
@@ -317,37 +316,6 @@ <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-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,
-	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 every element reachable from the original element
-	by traversing any number of child lists or shadow trees.
-
-	<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-deep/ span">x-foo /shadow-deep/ span</span>
-		selects all three of <code>&lt;span&gt;</code> elements:
-		<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>
-
 <h2 class="heading settled heading" data-level=6 id=selectors><span class=secno>6 </span><span class=content>
 Shadow DOM Selectors</span><a class=self-link href=#selectors></a></h2>
 
@@ -527,6 +495,46 @@ <h3 class="heading settled heading" data-level=6.4 id=content-combinator><span c
 		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.
 	</div>
 
+
+<h3 class="heading settled heading" data-level=6.5 id=deep-combinator><span class=secno>6.5 </span><span class=content>
+Selecting Through All Shadows: the <a class=css data-link-type=maybe href=#selectordef-deep title=/deep/>/deep/</a> combinator</span><a class=self-link href=#deep-combinator></a></h3>
+
+<p>	When a <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-deep>/deep/<a class=self-link href=#selectordef-deep></a></dfn> combinator is encountered in a selector,
+	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 every element reachable from the original element
+	by traversing any number of child lists or shadow trees.
+
+	<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 /deep/ span">x-foo /deep/ span</span>
+		selects all three of <code>&lt;span&gt;</code> elements:
+		<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>
+
+	<p class=issue id=issue-250ee37f><a class=self-link href=#issue-250ee37f></a>
+		This is basically a super-descendant combinator.
+		If the descendant combinator had a real glyph,
+		it would potentially be interesting to just double it.
+		Maybe we can give the descendant combinator a pseudonym of <span class=css data-link-type=maybe title=">>">&gt;&gt;</span>,
+		as it itself is a super-child combinator?
+		Then <a class=css data-link-type=maybe href=#selectordef-deep title=/deep/>/deep/</a> could be spelled <span class=css data-link-type=maybe title=">>>">&gt;&gt;&gt;</span>
+
 <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
 Conformance</span><a class=self-link href=#conformance></a></h2>
 
@@ -663,14 +671,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>::content, <a href=#selectordef-content title="section 6.4">6.4</a>
+<li>/deep/, <a href=#selectordef-deep title="section 6.5">6.5</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-context(), <a href=#selectordef-host-context title="section 6.2">6.2</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-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>
@@ -685,4 +693,12 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 <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>
 		I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
 
-<a href=#issue-46cdc4d6> ↵ </a></div></div>
+<a href=#issue-46cdc4d6> ↵ </a></div><div class=issue>
+		This is basically a super-descendant combinator.
+		If the descendant combinator had a real glyph,
+		it would potentially be interesting to just double it.
+		Maybe we can give the descendant combinator a pseudonym of <span class=css data-link-type=maybe title=">>">&gt;&gt;</span>,
+		as it itself is a super-child combinator?
+		Then <a class=css data-link-type=maybe href=#selectordef-deep title=/deep/>/deep/</a> could be spelled <span class=css data-link-type=maybe title=">>>">&gt;&gt;&gt;</span>
+
+<a href=#issue-250ee37f> ↵ </a></div></div>