Cross-Document View Transitions: Scaling Across Hundreds of Elements

This article covers scaling View Transitions API across hundreds of elements on product grids and galleries.

• •view-transition-name serves as identity (unique per page) while view-transition-class acts as a styling hook, similar to CSS classes
• •Wildcard selectors like ::view-transition-group(*.card) enable writing three CSS rules instead of hundreds of individual selectors
• •Proposed CSS functions ident() and sibling-index() would auto-generate unique names, but only sibling-index() has shipped in Chrome 138
• •Server-side name generation (e.g., product-42) combined with view-transition-class creates scalable cross-document MPA transitions
• •Just-in-time assignment of view-transition-name only at interaction moment reduces browser overhead compared to naming all elements at page load