[css-view-transitions] Tree scoping: Shadow DOM's view-transition-name property breaks global property

[joliss]

Here's a tree scoping issue related to #10145 and #10529. This might be intended behavior, but I wanted to double-check, because it's pretty counterintuitive and might affect extensibility.

Say I have this in my global stylesheet:

<style>
  ::part(foo) {
    view-transition-name: foo;
  }
</style>
<my-element></my-element>

and then inside my-element's shadow DOM, I have this:

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`<div part="foo"></div>`;
  }

  static styles = css`
    div {
      /* This causes the global view-transition-name to have no effect. */
      view-transition-name: foo !important;
    }
  `;
}

In Chrome (stable + Canary), the view-transition-name: foo !important; property inside MyElement causes the global view-transition-name: foo; property to stop having any effect. As a result, the div ends up with no view transition name at all.

Most likely this behavior is correct, and it's just how properties on parts must behave.

That said, I found it pretty counterintuitive, and it seems to me that it breaks encapsulation somewhat. I'm also worried that this behavior might cause extensibility issues down the line, if we want to be able to have the shadow DOM participate in view transitions in a future version of the spec. So I just wanted to raise this so the spec authors can double-check that this is the intended behavior.