[css-view-transitions-1] Naming elements inside shadow DOM via ::part

[khushalsagar]

The general principle behind shadow DOM is for style rules to be isolated to a particular tree scope. That was the rationale behind the resolution at #10145.

But the ::part pseudo-element is explicitly meant for rules in a tree scope to target elements in an embedded tree scope. So it's unclear how we should treat such elements. If the name on an element inside shadow DOM came via the ::part selector, should it be visible to a transition started on the outer Document. Should this name apply to transitions started within the shadow DOM (will be relevant for upcoming features), since it came from style rules outside the shadow DOM.

My reading is that the part and exportparts attribute are by design meant to make elements inside a shadow DOM visible to CSS in their parent DOM. And if an element is visible to CSS in a DOM, then it should be allowed to participate in transitions initiated in that DOM.

An alternative would be to track which tree scope a name came from and decide whether it applies based on that. That is, if the name came via the ::part selector then it only applies for transitions started in the parent DOM. And if it came from CSS rules within the shadow DOM then it only applies to transitions started within the shadow DOM. That seems more complicated to me. That said, I'm not super familiar with how authors generally use shadow DOM + ::part so not sure if this is the expected behaviour.

@nt1m @emilio @bramus @noamr @argyleink any suggestions?

[nt1m]

I realize tree-scoping VT comes with a bunch of issues, especially with the pseudo-elements being created only on the root element. Even if you scope VT name to a subtree, that VT name will be exposed to the Document through the pseudo-elements which breaks the scoping.

cc @fantasai

[noamr]

I realize tree-scoping VT comes with a bunch of issues, especially with the pseudo-elements being created only on the root element. Even if you scope VT name to a subtree, that VT name will be exposed to the Document through the pseudo-elements which breaks the scoping.

What if styling the pseudo-elements (everything under view-transition-group) were also tree-scoped? The only snag would be dealing with :only-child but perhaps we can find a specific solution to that?

[noamr]

@khushalsagar I'm a bit confused about which part of the spec says that this shouldn't work today. ::part styles are defined in the parent scope, so view-transition-names defined there should apply to the corresponding part inside the shadow DOM.

[noamr]

I checked and also animation-timeline currently doesn't work on parts. I think there is no reason why this shouldn't work, the encapsulation should be for styles not for elements. cc @flackr

[khushalsagar]

@khushalsagar I'm a bit confused about which part of the spec says that this shouldn't work today. ::part styles are defined in the parent scope, so view-transition-names defined there should apply to the corresponding part inside the shadow DOM.

It was added here. Though now that you asked maybe "tree context" is not the right term since it's associated with a selector not a node. So the spec text might need to be fixed. But the intent of the resolution was to exclude names from nodes in inner tree scopes.

[khushalsagar]

Turns out this is not an issue. @andruud clarified that the scoping spec already takes care of ::part by assigning the tree scope to a name based on where the style rule was declared. So using ::part would mean the tree scope of the name is the outer DOM's tree scope.