Merge pull request #7019 from lilles/rune/cq-originating-20220207

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

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,83 @@ 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>.
+
+	<div class=note>
+		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'' query their originating elements,
+			even if the <a>fictional tag sequence</a> may push the
+			<code>::first-line</code> 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
+			<code>::part()</code>, can be the query container for
+			<code>::before</code> in <code>host::part()::before</code>. Similarly,
+			<code>::before</code> can not be the query container for the
+			<code>::marker</code> in <code>div::before::marker</code>
+		* ''::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>
+
+	<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>