Skip to content

[css-view-transitions-2] [scoped] Allow self-participating scopes? #12319

Open
@skobes-chromium

Description

@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 we allow a self-participating scope?

This would allow the scope element to be a participant in its own transition, like this:

<div id="scope" style="view-transition-name: S">
  before
</div>
<script>
  scope.startViewTransition(() => {
    scope.innerText = "after";  // cross-fade "before" -> "after"
  });
</script>

There is some conceptual circularity because the scope "owns" the ::view-transition pseudo tree, and the pseudo tree contains a redirected rendering of each participant, including (under this proposal) a redirected rendering of the scope element itself.

Another weirdness about this is that only some of the scope's styles will be transitioned. In this demo (use Chrome 139+ with experimental web platform features enabled) the background is transitioned while the transform — which determines placement of the pseudo tree — is applied immediately.

The alternative is to disallow self-participation, which forces the developer to use a separate div:

<div id="scope">
  <div id="part" style="view-transition-name: S">
    before
  </div>
</div>
<script>
  scope.startViewTransition(() => {
    part.innerText = "after";  // cross-fade "before" -> "after"
  });
</script>

My recommendation is to allow self-participating scopes, to make the simple case more ergonomic.

cc @noamr @vmpstr @flackr @bramus @jakearchibald

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions