<style> div { color: attr(data-clr type(<color>), red); } </style> <div data-clr="blue">My text color is blue</div> <div>My text color is red (the fallback value)</div> <style> .card[id] { view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */ view-transition-class: card; } </style> <div class="cards"> <div class="card" id="card-1"></div> <div class="card" id="card-2"></div> <div class="card" id="card-3"></div> <div class="card" id="card-4"></div> </div> <br /> See the Pen <a href="https://codepen.io/web-dot-dev/pen/yyBKLmd"><br /> Auto view-transition-name with attr() and type(<custom-ident>)</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />