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

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

== [css-shared-element-transitions-1] Pseudo-element selectors for shared element transitions ==
We need to define the selector name and whether it takes an argument for each of the pseudo-elements that SET generates. For each tag on a DOM element via page-transition-tag (assuming its in both pages), the following tree is generated:

```
page-transition-container(foo)
|_page-transition-image-wrapper(foo)
  |_page-transition-incoming-image(foo)
  |_page-transition-outgoing-image(foo)
```

And all page-transition-container elements have the same ancestor, page-transition. If you write the full syntax, it would be something like this:

```css
html::page-transition::page-transition-container(foo)::page-transition-image-wrapper(foo)::page-transition-incoming-image(foo) {
  ...
}
```

Which is a lot to type. #7346 will help with that but we want to avoid a dependency on that and make the chaining syntax easier to type. So one option is a shorter name and no arguments for everything except container, which would be something like:

```css
html::page-transition::container(foo)::wrapper::incoming {
  ...
}
```

The names `container`, `wrapper`, `incoming` and `outgoing` might seem too generic but they'll only show up under page-transition so could be fine?

A caveat here is that once the descendant selector ships, you'll always need to reference the container to get to the images corresponding to a tag. Something like:

```css
html::>> container(foo)::>> incoming {
  ...
}
```

If everything under container does keep the argument then the above could be this instead:

```css
html::>> incoming(foo) {
  ...
}
```

But then the non-descendant selector would be:

```css
html::page-transition::container(foo)::wrapper(foo)::incoming(foo) {
  ...
}
```

I'm not sure which is better. @tabatkins @vmpstr.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7743 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 16:28:05 UTC