[css-view-transitions-2] Access to custom properties from within the pseudos

[bramus]

Something I see a lot of authors try to do – and fail at – is access custom properties of the original element from within the ::view-transition-* pseudos. See https://frontendmasters.com/blog/view-transitions-staggering/#but-does-that-actually-help-us for a recent example of this.

#items > * {
  view-transition-class: item;
  --index: sibling-index();
}

::view-transition-group(*.item) {
  animation-delay: calc(var(--index) * 0.02s);
}

Maybe we can have the ::view-transition-group pseudo gain access to the custom properties from the original element somehow?

Maybe by copying over the custom props in layered capture mode (which I can imagine would be slow when there are a ton of custom properties)?

Or maybe by defining their lookup mechanism (cfr. highlight pseudos), which I guess would be faster?

[jakearchibald]

What happens if the old & new states have the same custom property with different values?

[schenney-chromium]

I'm not sufficiently familiar with the view-transition pseudos to have an opinion on this one, at least not yet. I would like to point out that CSS pre-processors do expect to be able to set custom properties on the pseudo itself, regardless of how we define other inheritance models. Following @jakearchibald, I think we would need a single source for any copied values, plus adding local ones.

[bramus]

What happens if the old & new states have the same custom property with different values?

Good point. My initial thought on this was give the old snapshot access to the old element’s custom properties and the new snapshot access to the new element’s custom properties but that would be 1) very complicated and 2) wouldn’t cut it as you often want access to those custom properties from the group pseudo as well.

[bramus]

What happens if the old & new states have the same custom property with different values?

Checking how things are now, the VT pseudos – quite obviously – inherit their custom props from the new state of the :root because the DOM underneath already got changed (demo). So you could say that all pseudos should only see the values from the new state.

I would like to point out that CSS pre-processors do expect to be able to set custom properties on the pseudo itself, regardless of how we define other inheritance models.

Setting custom props on the pseudo itself is already possible. These also nicely inherit from outer ::view-transition-* pseudos onto inner ::view-transition-* pseudos (demo)