[csswg-drafts] [css-view-transitions] Tree scoping: Shadow DOM's view-transition-name property breaks parent's (#11273)

joliss has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions] Tree scoping: Shadow DOM's view-transition-name property breaks parent's ==
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:

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

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

```js
@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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11273 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 25 November 2024 21:49:49 UTC