View Transitions: Use the new attr() or match-element for the view-transition-name?

At CSS Day, “YouTube guy” Kevin Powell showed a lot of demos that relied on the advanced attr() function. In one of the examples he used attr() to set view-transition-name values — a technique I covered in my article on advanced attr() function. But then Cyd Stumpel asked during the Q&A if he couldn’t just use match-element there. The short answer that question is yes. The longer answer is … It Depends™ ~ view-transition-name: attr(…); To recap, the technique Kevin showed is this: <style> .card { view-transition-name: attr(data-id type(<custom-ident>), none); view-transition-class: card; } </style> It reads the data-id attribute’s value and casts it to a <custom-ident> for use as the view-transition-name value. You can see Kevin apply it live here. When applied, all cards will get a view-transition-name and get snapshotted — and therefore also move — individually as part of the View Transition. https://www.bram.us/wordpress/wp-content/uploads/2026/06/IMG_4559-1080p-30fps.mp4Kevin live…