demo · v137
Pairing lab
Click any tile in the grid. The lane on top uses view-transition-name: match-element; the lane underneath uses explicit per-element names. Identical markup. Same transition. Match-element lets you skip generating IDs you would otherwise need to invent per item.
probing…
last transition: —
matrix
| pattern | match-element | explicit names |
|---|---|---|
| list-detail of 100 items | 1 rule | 100 rules or per-item style |
| list ordering changes | just works | re-map IDs to DOM |
| nested same-type elements | unique by DOM identity | name collisions |
| declarative MPA cross-doc | N/A | required (names are stable IDs) |
the code
.card, .detail {
/* No per-item style — the browser pairs same-DOM-identity elements */
view-transition-name: match-element;
}
card.addEventListener("click", () => {
document.startViewTransition(() => openDetail(card));
});