[css-contain-3] Pseudo elements and shadow DOM w3c#5984 w3c#6711

Per resolution for issues w3c#5984 and w3c#6711:

w3c#5984 (comment)
w3c#6711 (comment)

Author: lilles

css-contain-3/Overview.bs

@@ -273,8 +273,8 @@ Container Queries</h2>
 	A [=query container=] is established by specifying
 	the possible query types using the 'container-type' property
 	(or the 'container' [=shorthand=]).
-	Style rules applying to its descendants can then be conditioned
-	by querying against it,
+	Style rules applying to its <a>shadow-including descendants</a> can then be
+	conditioned by querying against it,
 	using the ''@container'' [=conditional group rule=].
 
 	<div class=example>
@@ -303,6 +303,79 @@ Container Queries</h2>
 		will each respond to their own container context.
 	</div>
 
+	For selectors with pseudo elements, query containers can be established by
+	the <a>shadow-including inclusive ancestors</a> of the <a>ultimate
+	originating element</a>.
+
+	It follows that:
+
+	* Pseudo elements themselves can not be query containers
+	* ''::before'', ''::after'', ''::marker'', and ''::backdrop'' query their
+		originating elements
+	* ''::first-letter'' and ''::first-line'' queries its originating element,
+		even if the <a>fictional tag sequence</a> may push the ''::first-line''
+		past other elements for the purpose of inheritance and rendering
+	* Multiple pseudo elements do not allow pseudo elements to be query
+		containers for other pseudo elements. E.g., the host, but not the part()
+		can be the query container for ''::before'' in ''host::part()::before''
+		Similarly, the ''::before element'' can not be the query container for the
+		''::marker'' in ''div::before::marker''
+	* ''::slotted()'' selectors can query containers inside the shadow tree,
+		including the slot itself
+	* ''::part()'' selectors can query its originating host, but not internal
+		query containers inside the shadow tree
+	* ''::placeholder'' and ''::file-selector-button'' can query the input
+		element, but do not expose any internal containers if the input element is
+		implemented using a shadow tree
+
+	<div class=example>
+		A ::before selector querying the size of the originating element:
+
+		<pre class=lang-html>
+			&lt;style>
+				#container {
+					width: 100px;
+					container-type: inline-size;
+				}
+				@container size(inline-size < 150px) {
+					#inner::before {
+						content: "BEFORE";
+					}
+				}
+			&lt;/style>
+			&lt;div id=container>
+				&lt;span id=inner>&lt;/span>
+			&lt;/div>
+		</pre>
+	</div>
+
+	<div class=example>
+		A ::slotted() selector for styling a shadow host child can query a
+		container in the shadow tree:
+
+		<pre class=lang-html>
+			&lt;div id=host style="width:200px">
+				&lt;template shadowroot=open>
+					&lt;style>
+						#container {
+							width: 100px;
+							container-type: inline-size;
+						}
+						@container size(inline-size < 150px) {
+							::slotted(span) {
+								color: green;
+							}
+						}
+					&lt;/style>
+					&lt;div id=container>
+						&lt;slot />
+					&lt;/div>
+				&lt;/template>
+				&lt;span id=slotted>Green&lt;/span>
+			&lt;/div>
+		</pre>
+	</div>
+
 <h3 id="container-type">
 Creating Query Containers: the 'container-type' property</h3>