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

~

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.

~

view-transition-name: match-element;

The thing Cyd mentioned is match-element, which automatically gives an element a view-transition-name value based on the element’s identity. In Kevin’s demo this would totally work, and the demo would work just as with the attr() code.

<style>
  .card {
    view-transition-name: match-element;
    view-transition-class: card;
  }
</style>

So, what’s the fuss about then?

~

match-element works … until it doesn’t

The thing with match-element is that it uses element identity to assign automagic values. This element identity is not to be confused with the id attribute — they are two different things.

Think of this identity as an internal number that the browser assigns to created elements. Every time an element is created, the internal counter increments. So if you were to destroy an element and then recreate it including its id, you’d end up with an element that that has a different identity, even though it has the same id.

The side-effect of match-element using element identity, is that are two scenarios when you should not be using match-element at all:

1. When you build an MPA (aka: a website), match-element doesn’t work at all because nodes in different documents are never the same; they all have a different identity, so match-element can never match them.
2. If you need to style a specific element from the whole set, then you need the unique name to use in your ::view-transition-*() selectors, which match-element doesn’t give you.

So, there you have it 🙂

~

~