View transitions right now construct a tree of pseudo elements that in some sense "flattened". That is, each ::view-transition-group is a direct child of ::view-transition, which is a pseudo child of :root. This allows some nice effects where each piece of a transition moves independently.

However, there is also desire to have some relationship between the constructed groups.

1. Some elements should move relative to their containers while their containers are also participating in a transition. This could be something like a box moving across the screen and the contents within that box also animate in an orthogonal axis.
2. Some elements want to be clipped by the ancestor that is also participating in a transition. For example a button that stays the same size but its contents expand within the clip and crossfade.

Essentially what we want is for some elements to maintain their hierarchical relationship, where a ::view-transition-group can have another ::view-transition-group as a child.

The proposal is to add a new view-transition-tree property that takes two values: flatten and preserve. This property would only have an effect if a view-transition-name is also specified.

The flatten value would be the default value and act as it acts today, the element on which this appears does not affect how the view transition descendants are constructed.

The preserve value would act as a sort of a "containing block" for the view transition descendants: all of the descendants would be nested under their nearest preserve ancestor.

All of the names are bikesheddable, of course

/cc @nt1m @khushalsagar @noamr @jakearchibald