This issue tracks an open question about the behavior of Scoped View Transitions. Further context appears in the document Self-Participating Scopes.

Q: Can a self-participating scope be an outer-transition participant?

In theory, we could allow a scope to participate in two ways: as a self-participant in its own transition (#12319), and as a participant in an outer transition. This would require a new syntax:

<div id="outer-scope">
    <div id="inner-scope" style="contain: view-transition;
                                 view-transition-name: foo;
                                 outer-view-transition-name: bar">
    </div>
  </div>
</div>

The alternative is to use an ancestor of the inner scope as the outer participant:

<div id="outer-scope">
  <div id="outer-part" style="view-transition-name: bar">
    <div id="inner-scope" style="contain: view-transition;
                                 view-transition-name: foo">
    </div>
  </div>
</div>

Allowing a scope to directly participate both in its own transition and in an outer transition reduces the number of divs at the cost of increasing the number of concepts and properties the developer needs to understand.

One reason this would be confusing is that these two types of participation would need to work in different ways:

• Self-participation of the inner scope does not include the inner scope's ::view-transition pseudo-element (to avoid circularity)
• Outer participation of the inner scope does include the inner scope's ::view-transition pseudo-element

Another problem with double-participation is that it breaks the separation of concerns that is needed for composability. That is, the inner scope's style has a mix of

• styles that are within its own responsibility (contain: view-transition and view-transition-name) and
• styles that are within the responsibility of the outer scope (outer-view-transition-name).

For the above reasons, I recommend not allowing self-participating scopes to be outer-transition participants. Instead, developers who want this should wrap the inner scope in another div and make that div be the outer participant.

cc @noamr @vmpstr @flackr @bramus @jakearchibald