[shadow-styling] Kill the :top pseudoclass.

Author: tabatkins

shadow-styling/Overview.bs

@@ -39,6 +39,14 @@ Shadow Trees</h3>
 	Instead, the contents of the <a>active shadow tree</a> generates boxes
 	as if it were the contents of the element instead.
 
+	In several instances in shadow DOM,
+	elements don't have element parents
+	(instead, they may have a <a>shadow root</a> as parent,
+		or something else).
+	An element without a parent,
+	or whose parent is not an element,
+	is called a <dfn export>top-level element</dfn>.
+
 <h3 id='distribution-lists'>
 Distribution Lists</h3>
 
@@ -292,29 +300,6 @@ Shadow DOM Selectors</h2>
 	Shadow DOM defines a few new selectors
 	to help select elements in useful way related to Shadow DOM.
 
-<h3 id='top-selector'>
-Selecting Root-like Elements: the '':top'' pseudo-class</h3>
-
-	The <dfn selector>:top</dfn> pseudo-class
-	matches all elements which are not the children of other elements.
-	These are called <dfn export title="top-level element">top-level elements</dfn>.
-
-	<div class='example'>
-		For example, the root of a document has no element parent.
-		(In the DOM, it's the child of a <code>Document</code> object,
-		which is not an element.)
-
-		Similarly, elements that are children of a <code>ShadowRoot</code> object do not have element parents,
-		nor do elements that are appended directly to a <code>DocumentFragment</code>.
-	</div>
-
-	Note: Note that this definition is based on the data model of the host document,
-	not necessarily the data model of Selectors.
-	For example, <a>top-level elements</a> in a <a>shadow tree</a>
-	are considered to have the <a>host element</a> as their parent
-	<em>for the purposes of Selectors</em>,
-	but they still match '':top'' as they are not actually the child of an element.
-
 <h3 id='host-selector'>
 Selecting the Host Element: the '':host'' and '':host()'' pseudo-classes</h3>
 

shadow-styling/Overview.html

@@ -124,10 +124,9 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 		<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=#selectors><span class=secno>6</span> Shadow DOM Selectors</a>
 		<ul class=toc>
-		<li><a href=#top-selector><span class=secno>6.1</span> Selecting Root-like Elements: the <span class=css data-link-type=maybe title=:top>:top</span> pseudo-class</a>
-		<li><a href=#host-selector><span class=secno>6.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>
-		<li><a href=#ancestor-selector><span class=secno>6.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>
-		<li><a href=#shadow-pseudoelement><span class=secno>6.4</span> Selecting the Shadow Root Itself: the <span class=css data-link-type=maybe title=::shadow>::shadow</span> pseudo-element</a></ul>
+		<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=:ancestor()>:ancestor()</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></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>
@@ -174,6 +173,14 @@ <h3 class="heading settled heading" data-level=2.1 id=shadow-trees><span class=s
 	Instead, the contents of the <a data-link-type=dfn href=#active-shadow-tree title="active shadow tree">active shadow tree</a> generates boxes
 	as if it were the contents of the element instead.
 
+<p>	In several instances in shadow DOM,
+	elements don’t have element parents
+	(instead, they may have a <a data-link-type=dfn title="shadow root">shadow root</a> as parent,
+		or something else).
+	An element without a parent,
+	or whose parent is not an element,
+	is called a <dfn data-dfn-type=dfn data-export="" id=top-level-element>top-level element<a class=self-link href=#top-level-element></a></dfn>.
+
 <h3 class="heading settled heading" data-level=2.2 id=distribution-lists><span class=secno>2.2 </span><span class=content>
 Distribution Lists</span><a class=self-link href=#distribution-lists></a></h3>
 
@@ -421,30 +428,7 @@ <h2 class="heading settled heading" data-level=6 id=selectors><span class=secno>
 <p>	Shadow DOM defines a few new selectors
 	to help select elements in useful way related to Shadow DOM.
 
-<h3 class="heading settled heading" data-level=6.1 id=top-selector><span class=secno>6.1 </span><span class=content>
-Selecting Root-like Elements: the <a class=css data-link-type=maybe href=#selectordef-top title=:top>:top</a> pseudo-class</span><a class=self-link href=#top-selector></a></h3>
-
-<p>	The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-top>:top<a class=self-link href=#selectordef-top></a></dfn> pseudo-class
-	matches all elements which are not the children of other elements.
-	These are called <dfn data-dfn-type=dfn data-export="" id=top-level-element title="top-level element">top-level elements<a class=self-link href=#top-level-element></a></dfn>.
-
-	<div class=example>
-		For example, the root of a document has no element parent.
-		(In the DOM, it’s the child of a <code>Document</code> object,
-		which is not an element.)
-
-<p>		Similarly, elements that are children of a <code>ShadowRoot</code> object do not have element parents,
-		nor do elements that are appended directly to a <code>DocumentFragment</code>.
-	</div>
-
-<p class=note>	Note: Note that this definition is based on the data model of the host document,
-	not necessarily the data model of Selectors.
-	For example, <a data-link-type=dfn href=#top-level-element title="top-level elements">top-level elements</a> in a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>
-	are considered to have the <a data-link-type=dfn href=#host-element0 title="host element">host element</a> as their parent
-	<em>for the purposes of Selectors</em>,
-	but they still match <a class=css data-link-type=maybe href=#selectordef-top title=:top>:top</a> as they are not actually the child of an element.
-
-<h3 class="heading settled heading" data-level=6.2 id=host-selector><span class=secno>6.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=6.1 id=host-selector><span class=secno>6.1 </span><span class=content>
 Selecting the Host Element: the <a class=css data-link-type=maybe href=#selectordef-host0 title=:host>:host</a> and <a class=css data-link-type=maybe href=#selectordef-host title=:host()>:host()</a> pseudo-classes</span><a class=self-link href=#host-selector></a></h3>
 
 <p>	The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-host0>:host<a class=self-link href=#selectordef-host0></a></dfn> pseudo-class,
@@ -485,7 +469,7 @@ <h3 class="heading settled heading" data-level=6.2 id=host-selector><span class=
 		</ul>
 	</div>
 
-<h3 class="heading settled heading" data-level=6.3 id=ancestor-selector><span class=secno>6.3 </span><span class=content>
+<h3 class="heading settled heading" data-level=6.2 id=ancestor-selector><span class=secno>6.2 </span><span class=content>
 Selecting Based on an Ancestor Outside the Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-ancestor title=:ancestor()>:ancestor()</a> pseudo-class</span><a class=self-link href=#ancestor-selector></a></h3>
 
 <p>	Ordinary, selectors within a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>
@@ -520,7 +504,7 @@ <h3 class="heading settled heading" data-level=6.3 id=ancestor-selector><span cl
 	looking for elements that match its argument,
 	until it reaches the document root.
 
-<h3 class="heading settled heading" data-level=6.4 id=shadow-pseudoelement><span class=secno>6.4 </span><span class=content>
+<h3 class="heading settled heading" data-level=6.3 id=shadow-pseudoelement><span class=secno>6.3 </span><span class=content>
 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>
 
 <p>	If an element has at least one <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
@@ -693,20 +677,19 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <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.3">6.3</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>distribution list, <a href=#distribution-list title="section 2.2">2.2</a>
-<li>:host(), <a href=#selectordef-host title="section 6.2">6.2</a>
-<li>:host, <a href=#selectordef-host0 title="section 6.2">6.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.4">6.4</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 host, <a href=#shadow-host title="section 2.1">2.1</a>
 <li>shadow tree, <a href=#shadow-tree title="section 2.1">2.1</a>
-<li>:top, <a href=#selectordef-top title="section 6.1">6.1</a>
-<li>top-level element, <a href=#top-level-element title="section 6.1">6.1</a>
+<li>top-level element, <a href=#top-level-element title="section 2.1">2.1</a>
 </ul></div>
 
 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>