Thinking of this example https://codepen.io/jaffathecake/pen/VwBprqL
In this case the developer has to manually give each list item a unique view-transition-name. This could be avoided via something like:
.list-item {
view-transition-name: element-uuid();
}
Where element-uuid() returns a value unique and constant for that DOM node.
The proposal for CSS random() has a per-element value that could be generalised as element-uuid(). #2826 (comment) (cc @tabatkins)
The downside to this is it would only work for same-document transitions, since element-uuid()s will always be different across documents. It also depends on element usage being consistent, which some frameworks don't always get right.
Edit: This would depend on #8319, otherwise styling the resulting pseudos is impossible.
Thinking of this example https://codepen.io/jaffathecake/pen/VwBprqL
In this case the developer has to manually give each list item a unique
view-transition-name. This could be avoided via something like:Where
element-uuid()returns a value unique and constant for that DOM node.The proposal for CSS
random()has aper-elementvalue that could be generalised aselement-uuid(). #2826 (comment) (cc @tabatkins)The downside to this is it would only work for same-document transitions, since
element-uuid()s will always be different across documents. It also depends on element usage being consistent, which some frameworks don't always get right.Edit: This would depend on #8319, otherwise styling the resulting pseudos is impossible.