[csswg-drafts] [css-view-transitions-2] [scoped] Can a self-participating scope be an outer-transition participant? (#12322)

skobes-chromium has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] [scoped] Can a self-participating scope be an outer-transition participant? ==
This issue tracks an open question about the behavior of [Scoped View Transitions](https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md). Further context appears in the document [Self-Participating Scopes](https://bit.ly/svt-sps).

**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 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12322 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 11 June 2025 19:41:45 UTC