Post

If you thought we were done with View Transitions, guess again! A feature Chrome is working on, is “Scoped View Transitions”, which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent transitions and prevents layering issues. developer.chrome.com/blog/scoped-...

In the video you can see how document-scoped and element-scoped transitions behave. When using the latter, the blue dot remains clipped by the scope; the popover remains visible on top of the scope; and the rest of the DOM remains interactive.

You can try out Scoped View Transitions in Chrome 140+ with experimental web platform features. We are actively looking for feedback on this one. Find all info (and a list of known issues) in developer.chrome.com/blog/scoped-....

Whats the expected behavior for scoped VTs in shadow roots?

By design they should "just work" with the view-transition-name matching working only within the scope. I haven't tested this myself though.

What happened is that we've made view-transition names shadow-scoped at some point, so after that you couldn't make document-scoped view-transition that pierce shadow roots, and have to use ::part for that. But if the whole view-transition is scoped inside the shadow you should be fine methinks.

I wonder if we could make the tag containment introduced for scoped (github.com/WICG/view-tr...) fit onto all of that. 🤔

If you use shadow DOM for encapsulation and the view transition is inside the shadow you might not need tag containment, as the shadow boundary already does that.