Re: [csswg-drafts] [css-shared-element-transitions-1] Pseudo-element selectors for shared element transitions (#7743)

Another option uses [part](https://drafts.csswg.org/css-shadow-parts/#part) which relies on using a shadow DOM rooted at the html element. We were concerned that this would disallow developers from attaching their shadow DOM to the root but the [spec](https://dom.spec.whatwg.org/#dom-element-attachshadow) already disallows that.

The structure for the shadow DOM would be the same as with pseudo-elements above. It has part attributes to match selectors. So for the example above:

```html
<div part="page-transition">
  <div part="container container-foo">
    <div part="wrapper wrapper-foo">
      <div part="incoming incoming-foo"></div>
      <div part="outgoing outgoing-foo"></div>
    </div>
  </div>
</div>
```

And then selectors to target them can be:

```css
/* Matches all container elements. */
html::part(container) {
  ...
}

/* Matches container element for foo. */
html::part(container-foo) {
  ...
}
```

The comment [here](https://github.com/w3c/csswg-drafts/issues/7463#issuecomment-1177301913) brought up a use-case to conditionally apply CSS based on whether one of the pseudo-element exists, for example we only have the incoming image, using has. This syntax would rely on adding additional part names for this. For example:

```html
<div part="page-transition">
  <div part="container container-foo">
    <div part="wrapper wrapper-foo">
      <div part="incoming incoming-foo incoming-only-foo"></div>
    </div>
  </div>
</div>
```

Can use the following selector:
```css
html::part(incoming-only-foo) {
  ...
}
```

The exact part names still up for bike-shedding.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7743#issuecomment-1247316773 using your GitHub account


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

Received on Wednesday, 14 September 2022 21:23:17 UTC