[selectors-4] Edit in the more complete rules for matching featureless elements, and the WG-approved rule for matching :has(). w3c#10179 w3c#10693

Author: tabatkins

selectors-4/Overview.bs

@@ -656,22 +656,6 @@ Data Model</h3>
 		<li>Attributes, which are name-value pairs.
 	</ul>
 
-	While individual elements may lack any of the above features,
-	some elements are <dfn export>featureless</dfn>.
-	A <a>featureless</a> element does not match any selector at all,
-	except those it is explicitly defined to match
-	(and [=logical combination pseudo-classes=] representing those selectors).
-	If a given selector <em>is</em> allowed to match a <a>featureless</a> element,
-	it must do so while ignoring the default namespace. [[CSS3NAMESPACE]]
-
-	<div class='example'>
-		For example, the <a>shadow host</a> in a <a>shadow tree</a> is <a>featureless</a>,
-		and can't be matched by <em>any</em> <a>pseudo-class</a>
-		except for '':host'' and '':host-context()''
-		(or combinations including those,
-		such as '':is(:host, :root)'').
-	</div>
-
 	Many of the selectors depend on the semantics of the <dfn export>document language</dfn>
 	(i.e. the language and semantics of the document tree)
 	and/or the semantics of the <dfn>host language</dfn>
@@ -683,6 +667,75 @@ Data Model</h3>
 	to define what a ''::first-line'' pseudo-element represents
 	and what it can do.
 
+<h4 id=featureless-elements>
+Featureless Elements</h4>
+
+	While individual elements may lack any of the above features,
+	some elements are <dfn export>featureless</dfn>.
+	A <a>featureless</a> element does not match <em>any selector at all</em>,
+	except:
+
+	* [=simple selectors=] it is explicitly defined to match
+	* [=compound selectors=],
+		if all contained [=simple selectors=]
+		are allowed to match it
+	* [=complex selectors=],
+		if the [=compound selector=] targeting the [=selector/subject=]
+		is allowed to match it
+	* [=selector lists=],
+		if at least one selector in the list
+		is allowed to match it
+	* [=logical combination pseudo-classes=],
+		if their argument selector is allowed to match it
+	* the '':has()'' pseudo-class,
+		if and only if the [=compound selector=] it's part of
+		contains at least one <em>other</em> [=simple selector=]
+		that's allowed to match it.
+
+	If a selector would otherwise match a [=featureless=] element,
+	except for the existence of the default namespace [[CSS-NAMESPACES-3]]
+	(because [=featureless=] elements do not have a namespace
+	unless otherwise defined),
+	the default namespace does not prevent the match.
+
+	<div class='example'>
+		For example, the [=shadow host=] in a [=shadow tree=] is [=featureless=],
+		and can't be matched by <em>any</em> [=pseudo-class=]
+		except for '':host'' and '':host-context()''
+		(or combinations including those,
+		such as '':is(:host, :root)'').
+
+		Logical combinations like '':not(.foo:host)''
+		will never match the host element
+		(even if it doesn't have a "foo" class),
+		because not all of the simple selectors in ''.foo:host''
+		are allowed to match the [=shadow host=].
+
+		Similarly, '':not(:host > .foo)'' will never match the [=shadow host=],
+		even tho the [=shadow host=] is indeed *not* a descendant of itself
+		and doesn't have the "foo" class,
+		because the subject of the complex selector argument (''.foo'')
+		isn't allowed to match the [=shadow host=].
+	</div>
+
+	<div class='example'>
+		In general, you can't match a [=featureless=] element
+		without explicitly using one of the [=simple selectors=]
+		it's allowed to match,
+		to avoid accidentally selecting one of these elements
+		(which are otherwise <em>intentionally</em> easy to not think about).
+		For example, ''*'' will never match a [=featureless=] element.
+
+		The rule for '':has()'', above, works similarly.
+		Even if a [=shadow host=] contains a ''.foo'' descendant,
+		'':has(.foo)'' will not match it,
+		because <em>the rest</em> of the compound selector
+		(empty)
+		doesn't contain a simple selector that can match the host.
+		You have to write '':host:has(.foo)'' in order to match the host element.
+	</div>
+
+
 <h3 id="scoping">
 Scoped Selectors</h3>