[css-view-transitions] view-transition-* does not accept CSS variables

[tounsoo]

As I am building libraries, I have a case where a component can be nested, an example would be Tabs.

In that case, I need the ::view-transition-class and ::view-transition-new etc to be different between the nested so that transition is isolated for each. I believe using CSS var would be the cleanest way to do this but it doesn't except them.

Ex)

.tab {
  // other styles
  view-transition-class: var(--tab-unique-name);
}
::view-transition-new(var(--tab-unique-name)) {
   // some animation
}