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:

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:

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:

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

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

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

But then the non-descendant selector would be:

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

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