Intent to Ship: view-transition-name: match-element

[Vladimir Levin]

Contact emails

vmp...@chromium.org, nrose...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name

Summary

'match-element' generates a unique id based on the element's identity and renames the same for this element. This is used in Single Page App cases where the element is being moved around and the desire is to animate it with a view transition Note this is split off from https://chromestatus.com/feature/6575974796492800 which contains additional discussions

Blink component

Blink>ViewTransitions>SPA

TAG review

https://github.com/w3ctag/design-reviews/issues/1001

TAG review status

Issues addressed. Note that TAG discussion continues about view-transition-name: auto which will be tracked in a separate intent.

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1198)

WebKit: Shipped/Shipping (https://developer.apple.com/documentation/safari-release-notes/safari-18_4-release-notes)

Web developers: Positive This is a developer request feature to ensure that they do not have to come up with unique names for every participating element.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

No

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-view-transitions/match-element-name.html?label=master&label=experimental&aligned

Flag name on about://flags

None

Finch feature name

CSSViewTransitionMatchElement

Requires code in //chrome?

False

Estimated milestones

Shipping on desktop	137
Shipping on Android	137
Shipping on WebView	137

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5098745710247936?gate=5195081088499712

This intent message was generated by Chrome Platform Status.

[Vladimir Levin]

On Mon, Mar 31, 2025 at 3:27 PM Vladimir Levin <vmp...@chromium.org> wrote:

Contact emails

vmp...@chromium.org, nrose...@chromium.org

Explainer

None

The explainer is here: https://github.com/WICG/view-transitions/blob/main/auto-name-explainer.md

[Mike Taylor]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADsXd2MKxgArePnUEv9RFdDz_q9EvGy9uk_JeWgcvna1FuMZEQ%40mail.gmail.com.

[Yoav Weiss (@Shopify)]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f9c7e677-0893-4221-9295-8ce970598d29%40chromium.org.

[Domenic Denicola]

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOmohSJwtDikLdBh9M3swNfNT_v_kmuFC-WPpEyiKorWRw47_Q%40mail.gmail.com.

[Jake Archibald]

Although I think `view-transition-name: auto` is a mistake, I support `match-element` landing.

I don't think web developers as a whole have a good understanding of DOM node equality, and as folks use it outside of small demos they'll likely be caught out by nodes being unexpectedly unequal, due to innerHTML or frameworks, which tend to treat DOM node reuse as an optimisation rather than an expectation.

But, unlike `auto`, it has a name that hints at how it works, and doesn't have a name that feels like it's recommending you to use it. Also, it doesn't work in cross-document transitions, which is better than the "some parts of it work" model you get with `auto`.

`match-element` may become a lot more useful with scoped view transitions, where you're working with a smaller part of the DOM.

Jake.