[shadow-styling] :ancestor() -> :host-context(), specify that :host-context() only matches the host element.

Author: tabatkins

shadow-styling/Overview.bs

@@ -301,7 +301,7 @@ Selecting the Host Element: the '':host'' and '':host()'' pseudo-classes</h3>
 	</div>
 
 <h3 id='ancestor-selector'>
-Selecting Based on an Ancestor Outside the Shadow Tree: the '':ancestor()'' pseudo-class</h3>
+Selecting Based on an Ancestor Outside the Shadow Tree: the '':host-context()'' pseudo-class</h3>
 
 	Ordinary, selectors within a <a>shadow tree</a>
 	can't see elements outside the <a>shadow tree</a> at all.
@@ -316,15 +316,15 @@ Selecting Based on an Ancestor Outside the Shadow Tree: the '':ancestor()'' pseu
 		or higher up in the document.
 	</div>
 
-	The <dfn selector>:ancestor()</dfn> functional pseudo-class tests whether there is an ancestor,
+	The <dfn selector>:host-context()</dfn> functional pseudo-class tests whether there is an ancestor,
 	outside the <a>shadow tree</a>,
 	which matches a particular selector.
 	Its syntax is:
 
-	<pre>:ancestor( <<compound-selector>> )</pre>
+	<pre>:host-context( <<compound-selector>> )</pre>
 
 	When evaluated in the context of a <a>shadow tree</a>,
-	the '':ancestor()'' pseudo-class matches any element,
+	the '':host-context()'' pseudo-class matches the <a>host element</a>,
 	if the <a>host element</a> or one of its ancestors matches the provided <<compound-selector>>.
 	For the purpose of this pseudo-class,
 	the "ancestor" of an element is its parent,

shadow-styling/Overview.html

@@ -124,7 +124,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 	<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=:ancestor()>:ancestor()</span> pseudo-class</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></ul>
 	<li><a href=#conformance><span class=secno></span> Conformance</a>
 		<ul class=toc>
@@ -427,7 +427,7 @@ <h3 class="heading settled heading" data-level=6.1 id=host-selector><span class=
 	</div>
 
 <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>
+Selecting Based on an Ancestor Outside the Shadow Tree: the <a class=css data-link-type=maybe href=#selectordef-host-context title=:host-context()>:host-context()</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>
 	can’t see elements outside the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> at all.
@@ -442,14 +442,14 @@ <h3 class="heading settled heading" data-level=6.2 id=ancestor-selector><span cl
 		or higher up in the document.
 	</div>
 
-<p>	The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-ancestor>:ancestor()<a class=self-link href=#selectordef-ancestor></a></dfn> functional pseudo-class tests whether there is an ancestor,
+<p>	The <dfn class=css-code data-dfn-type=selector data-export="" id=selectordef-host-context>:host-context()<a class=self-link href=#selectordef-host-context></a></dfn> functional pseudo-class tests whether there is an ancestor,
 	outside the <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
 	which matches a particular selector.
 	Its syntax is:
 
-<pre>:ancestor( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
+<pre>:host-context( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a> )</pre>
 <p>	When evaluated in the context of a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>,
-	the <a class=css data-link-type=maybe href=#selectordef-ancestor title=:ancestor()>:ancestor()</a> pseudo-class matches any element,
+	the <a class=css data-link-type=maybe href=#selectordef-host-context title=:host-context()>:host-context()</a> pseudo-class matches the <a data-link-type=dfn href=#host-element0 title="host element">host element</a>,
 	if the <a data-link-type=dfn href=#host-element0 title="host element">host element</a> or one of its ancestors matches the provided <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/selectors-4/#ltcompound-selector title="<compound-selector>">&lt;compound-selector&gt;</a>.
 	For the purpose of this pseudo-class,
 	the "ancestor" of an element is its parent,
@@ -644,11 +644,11 @@ <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.2">6.2</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-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>