[csswg-drafts] [css-view-transitions-2] [scoped] Should the scope have contain:v-t by default? (#12321)

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

== [css-view-transitions-2] [scoped] Should the scope have contain:v-t by default? ==
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: Should the scope have contain:v-t by default?**

A goal of scoped view transitions is to enable composability: inner and outer components can both use transitions without being aware of each other.

```
<div id="outer-scope">
  <div id="outer-participant" style="view-transition-name: foo">
    <div id="inner-scope">
      <div id="inner-participant" style="view-transition-name: foo">
      </div>
    </div>
  </div>
</div>
```

But this means we should have a way to stop the outer transition from seeing the tags that "belong" to the inner transition.

Chromium has prototyped `contain: view-transition` for this:

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

It should probably be a recommended best practice for developers to set `contain: view-transition` on all elements that will be scopes.

If the developer does not set `contain: view-transition` on a scope, the browser could do it automatically during the transition.  This would not prevent inner tags from being picked up by an outer transition when the inner transition is not running.

If scopes are self-participating by default (#12319), then they should probably also be `contain: view-transition` by default, so that an outer transition does not try to use an inner transition's scope as a participant in the outer transition.

cc @noamr @vmpstr @flackr @bramus @jakearchibald 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12321 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:34:14 UTC