[css-view-transitions-2] Add 'view-transition-class'

A `view-transition-class` property allows specifying view-transition pseudo-elements
that apply to multiple participating elements without having to replicate them.

In this PR:
- Specifying `view-transition-class`
- Extending the pseudo-element syntax to support `::view-transition-foo(name.class)`
- Extending the capture algorithms and data structure to capture the classes
- Added a simple example for using classes

Based on [this resolution](#8319 (comment)).
Closes #8319

css-view-transitions-1/Overview.bs

@@ -1168,7 +1168,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 ### [=Captured elements=] ### {#captured-elements}
 
-	A <dfn>captured element</dfn> is a [=struct=] with the following:
+	A <dfn export>captured element</dfn> is a [=struct=] with the following:
 
 	<dl dfn-for="captured element">
 		: <dfn>old image</dfn>

css-view-transitions-2/Overview.bs

@@ -34,6 +34,9 @@ spec:css-view-transitions-1;
 	text: setup view transition; type: dfn;
 spec:dom; type:dfn; text:document
 spec:css22; type:dfn; text:element
+spec:selectors-4; type:dfn;
+	text:selector
+	text:type selector
 spec:html
 	text: latest entry; type: dfn;
 	text: was created via cross-origin redirects; type: dfn;
@@ -199,6 +202,83 @@ spec:infra; type:dfn; text:list
 		```
 	</div>
 
+### Example of using 'view-transition-class' ### {#vt-class-example}
+
+In addition to cross-document view-transitions, this document specifies a way to use the same view-transition style
+for multiple elements without having to replicate the corresponding pseudo-elements.
+
+	<div class="example">
+	This example creates a transition with each box participating under its own name, while applying
+	a 1-second duration to the animation of all the boxes:
+
+	```html
+	<div class="box" id="red-box"></div>
+	<div class="box" id="green-box"></div>
+	<div class="box" id="yellow-box"></div>
+	```
+
+	```css
+	div.box {
+		view-transition-class: any-box;
+		width: 100px;
+		height: 100px;
+	}
+	#red-box {
+		view-transition-name: red-box;
+		background: red;
+	}
+	#green-box {
+		view-transition-name: green-box;
+		background: green;
+	}
+	#yellow-box {
+		view-transition-name: yellow-box;
+		background: yellow;
+	}
+
+	/* The following style would apply to all the boxes, thanks to 'view-transition-class' */
+	::view-transition-group(*.any-box) {
+		animation-duration: 1s;
+	}
+	```
+
+	</div>
+
+
+# CSS Properties # {#css-properties}
+
+## Applying the same style to multiple participating elements: the 'view-transition-class' property ## {#view-transition-class-prop}
+
+	<pre class=propdef>
+	Name: view-transition-class
+	Value: none | <<custom-ident>>*
+	Initial: none
+	Inherited: no
+	Percentages: n/a
+	Computed Value: as specified
+	Animation type: discrete
+	</pre>
+
+	The 'view-transition-class' works alongside 'view-transition-name', and is read at the same time
+	'view-transition-name' is read. But unlike 'view-transition-name', 'view-transition-class' doesn't
+	have to be unique - an element can have several view-transition classes, and the same 'view-transition-class'
+	can apply to multiple elements. While 'view-transition-name' is used to match between the element
+	in the old state with its corresponding element in the new state, 'view-transition-class' is used
+	only to apply styles using the view-transition pseudo-elements
+	(''::view-transition-group()'', ''::view-transition-image-pair()'', ''::view-transition-old()'', ''::view-transition-new()'').
+
+	<dl dfn-type=value dfn-for=view-transition-class>
+		: <dfn>none</dfn>
+		:: No class would apply to the [=/element=], and pseudo-elements would have to match its 'view-transition-name'.
+
+		: <dfn><<custom-ident>>*</dfn>
+		:: All of the specified <<custom-ident>> values (apart from <css>none</css>) apply as classes for the [=/element=].
+
+			Note: If the same 'view-transition-name' is specified for an element both in the old and new states of the transition,
+			only the 'view-transition-class' values from the new state apply. This also applies for cross-document view-transitions:
+			classes from the old document would only apply if their corresponding 'view-transition-name' was not specified in the new document.
+	</dl>
+
 # Pseudo-classes # {#pseudo-classes}
 
 ## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo}
@@ -252,6 +332,34 @@ document.startViewTransition({update: updateTheDOMSomehow});
 ```
 </div>
 
+# Additions to view-transition pseudo-elements # {#pseudo-element-additions}
+
+	The <dfn>named view transition pseudo-elements</dfn>
+	(''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'')
+	are extended to support the following syntax for each |pseudo|:
+
+	<pre class=prod>
+		::view-transition-group(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-image-pair(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-old(<<pt-name-selector>><<pt-class-selector>>)
+		::view-transition-new(<<pt-name-selector>><<pt-class-selector>>)
+	</pre>
+
+	where <<pt-name-selector>> works as previously defined, and
+	<<pt-class-selector>> has the following syntax definition:
+
+	<pre class=prod>
+		<dfn>&lt;pt-class-selector></dfn> = ('.' <<custom-ident>>)*
+	</pre>
+
+	A [=named view transition pseudo-element=] [=selector=] which has one or more <<custom-ident>> values
+	in its <<pt-class-selector>> would only match an element if the element's [=captured element/class list=]
+	[=list/contains=] all of those values.
+
+	The specificity of a [=named view transition pseudo-element=] [=selector=]
+	with a <<pt-class-selector>>
+	is equivalent to a [=class selector=] with the equivalent number of classes.
+
 # CSS rules # {#css-rules}
 
 ## The <dfn id="at-view-transition-rule">''@view-transition''</dfn> rule ## {#view-transition-rule}
@@ -385,6 +493,27 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
 		:: Null or a [=list=] of strings, initially null.
 	</dl>
 
+## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct}
+
+	<dl>
+		: <dfn for="captured element">class list</dfn>
+		:: a [=/list=] of strings, initially empty.
+	</dl>
+
+## Additions to capture algorithms: ## {#additions-to-capture-algorithms}
+<div algorithm="capture old classes">
+When capturing the old state of the view transition, perform the following step when iterating on |captureElements| given |element| and |capture|:
+
+	1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.
+
+</div>
+
+<div algorithm="capture new classes">
+When capturing the new state of the view transition, perform the following step when iterating on |captureElements| given |element| and |namedElements|:
+
+	1. Set |namedElement|[|transitionName|]'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.
+</div>
+
 ## Monkey patches to HTML ## {#monkey-patch-to-html}
 
 	<div algorithm="monkey patch to apply the history step">