[css-scoping-1] Define the specificity of :host/etc, per WG resolution. Closes w3c#1915.

Author: tabatkins

css-scoping-1/Overview.bs

@@ -25,7 +25,7 @@ spec:html; type:element; text:style
 spec:selectors-4; type:dfn;
 	text: static profile
 	text: dynamic profile
-spec:css-pseudo-4; type:selector; 
+spec:css-pseudo-4; type:selector;
 	text:::before
 	text:::after
 spec:cascade-4; type:dfn; text: inherit
@@ -263,6 +263,20 @@ Selecting Into the Light: the '':host'', '':host()'', and '':host-context()'' ps
 	In any other context,
 	it matches nothing.
 
+	The [=specificity=] of '':host'' is that of a pseudo-class.
+	The [=specificity=] of '':host()'' is that of a pseudo-class,
+	plus the [=specificity=] of its argument.
+
+	Note: This is different from the specificity of similar pseudo-classes,
+	like '':matches()'' or '':not()'',
+	which <em>only</em> take the specificity of their argument.
+	This is because '':host'' is affirmatively selecting an element all by itself,
+	like a "normal" pseudo-class;
+	it takes a selector argument for syntactic reasons
+	(we can't say that '':host.foo'' matches but ''.foo'' doesn't),
+	but is otherwise identical
+	to just using '':host'' followed by a selector.
+
 	<div class='example'>
 		For example, say you had a component with a <a>shadow tree</a> like the following:
 
@@ -310,6 +324,9 @@ Selecting Into the Light: the '':host'', '':host()'', and '':host-context()'' ps
 	In any other context,
 	it matches nothing.
 
+	The [=specificity=] of '':host-context()'' is that of a pseudo-class,
+	plus the [=specificity=] of its argument.
+
 	Note: This means that the selector pierces through shadow boundaries on the way up,
 	looking for elements that match its argument,
 	until it reaches the document root.
@@ -348,6 +365,9 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element</h4>
 	like ''::slotted()::before'',
 	representing the appropriate pseudo-element of the elements represented by the ''::slotted()'' pseudo-element.
 
+	The [=specificity=] of ''::slotted()'' is that of a pseudo-element,
+	plus the [=specificity=] of its argument.
+
 	<div class="example">
 		For example, say you had a component with both children and a shadow tree,
 		like the following: