diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs
index 3b073f72b7e..30ee204f5b6 100644
--- a/css-view-transitions-2/Overview.bs
+++ b/css-view-transitions-2/Overview.bs
@@ -32,8 +32,12 @@ spec:css-view-transitions-1;
text: call the update callback; type: dfn;
text: perform pending transition operations; type: dfn;
text: setup view transition; type: dfn;
+ text: named view transition pseudo-element; 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;
@@ -122,6 +126,8 @@ spec:infra; type:dfn; text:list
## Examples ## {#examples}
+### Cross-document view-transitions ### {#cross-doc-example}
+
To generate the same cross-fade as in the first example [[css-view-transitions-1#examples]],
but across documents, we don't need JavaScript.
@@ -199,6 +205,84 @@ spec:infra; type:dfn; text:list
```
+### 'view-transition-class' ### {#vt-class-example}
+
+view-transition-class provides a way to use the same view-transition style
+for multiple elements without having to replicate the corresponding pseudo-elements.
+
+
+ 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
+
+
+
+ ```
+
+ ```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;
+ }
+ ```
+
+
+ Name: view-transition-class
+ Value: none | <>*
+ Initial: none
+ Inherited: no
+ Percentages: n/a
+ Computed Value: as specified
+ Animation type: discrete
+
+
+ The 'view-transition-class' can be used to apply the same style rule to multiple [=named view transition pseudo-elements=] which may have a different 'view-transition-name'.
+ 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()'').
+
+ Note that 'view-transition-class' by itself doesn't mark an element for capturing, it is only used as an additional
+ way to style an element that already has a 'view-transition-name'.
+
+
+ : none
+ :: No class would apply to the [=named view transition pseudo-elements=] generated for this element.
+
+ : <>*
+ :: All of the specified <> values (apart from none) are applied when used in [=named view transition pseudo-element=] selectors.
+ none is an invalid <> for 'view-transition-class', even when combined with other <>s.
+
+ 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.
+
+
# Pseudo-classes # {#pseudo-classes}
## Active View Transition Pseudo-class '':active-view-transition()''' ## {#the-active-view-transition-pseudo}
@@ -252,6 +336,34 @@ document.startViewTransition({update: updateTheDOMSomehow});
```
+# Additions to named view-transition pseudo-elements # {#pseudo-element-additions}
+
+ The [=named view transition pseudo-elements=]
+ (''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'')
+ are extended to support the following syntax:
+
+
+ ::view-transition-group(<><>)
+ ::view-transition-image-pair(<><>)
+ ::view-transition-old(<><>)
+ ::view-transition-new(<><>)
+
+
+ where <> works as previously defined, and
+ <> has the following syntax definition:
+
+
+ <pt-class-selector> = ('.' <>)*
+
+
+ A [=named view transition pseudo-element=] [=selector=] which has one or more <> values
+ in its <> would only match an element if the [=captured element/class list=] value in
+ [=ViewTransition/named elements=] for the pseudo-element's 'view-transition-name' [=list/contains=] all of those values.
+
+ The specificity of a [=named view transition pseudo-element=] [=selector=]
+ with a <>
+ is equivalent to a [=class selector=] with the equivalent number of classes.
+
# CSS rules # {#css-rules}
## The ''@view-transition'' rule ## {#view-transition-rule}
@@ -385,6 +497,24 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
:: Null or a [=list=] of strings, initially null.
+## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct}
+
+The [=captured element=] struct should contain these fields, in addition to the existing ones:
+
+
+ : class list
+ :: a [=/list=] of strings, initially empty.
+
+
+## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms}
+
+When capturing the old or new state for an element, perform the following steps given a [=captured element=] |capture| and an [=element=] |element|:
+
+ 1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.
+
+ Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.
+
+
## Monkey patches to HTML ## {#monkey-patch-to-html}