[css-view-transitions-2] [scoped] Should the scope have contain:v-t by default?

[skobes-chromium]

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

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