[css-pseudo] Add ::backdrop and ::view-transitions to the CSSPseudoElement's allowed pseudo-elements list

[danielsakhapov]

CSSPseudoElement is currently only defined for ::after, ::before and ::marker, but ::backdrop and ::view-transitions also make sense to be added there.

E.g. ::backdrop is useful to close a dialog when its backdrop is clicked, without interfering with clicks inside the dialog content.

dialog.addEventListener('click', (event) => {
  if (event.pseudoTarget?.type === '::backdrop') {
    dialog.close();
  }
});

without involving any intersection code to determine if the dialog itself vs ::backdrop has been clicked.

And ::view-transitions can be used to do a geometry-aware view transition we can read the bounding rect of ::view-transition-old to set a custom animation origin.

document.addEventListener('transitionstart', (event) => {
  if (event.pseudoTarget?.type === '::view-transition-old') {
    const rect = event.pseudoTarget.getBoundingClientRect();
    setTransformOrigin(rect);
  }
});

or intercept VT mid-flight to start a new one, while knowing the coordinates of the currently aminating element to avoid sudden jumps and such.

[emilio]

Are we exposing the whole tree of ::view-transition stuff? E.g. in your example, how would you distinguish between the view-transition-group(foo)::view-transition-old and view-transition-group(bar)::view-transition-old?

[danielsakhapov]

Yes, the whole tree (so you can go up/down via .parent/.pseudo()), e.g.:
https://wpt.fyi/results/css/css-pseudo/CSSPseudoElement-view-transitions-scoped.tentative.html
https://wpt.fyi/results/css/css-pseudo/CSSPseudoElement-view-transitions.tentative.html
https://wpt.fyi/results/css/css-pseudo/events-on-view-transition-pseudos.tentative.html

[vmpstr]

all of the view transition elements should be qualified with the argument. i.e. ::view-transition-old(foo) and ::view-transition-image-pair(foo) etc.

Is the idea that we preserve this in the type or we strip this out and just leave the bare ::view-transition-old and ::view-transition-image-pair? FWIW, I hope we keep the argument

[flackr]

Let's add ::scroll-button, ::scroll-marker and ::scroll-marker-group as well. Though I'm curious if an easier more general rule couldn't just be any tree abiding pseudo?

[danielsakhapov]

Let's add ::scroll-button, ::scroll-marker and ::scroll-marker-group as well.

#13346

Though I'm curious if an easier more general rule couldn't just be any tree abiding pseudo?

Maybe worth discussing as part of #12160?

[flackr]

I think we may as well resolve on a larger set in one discussion rather than need to raise it again for discussion for a bunch of small sets of pseudo-elements. If there are any objections to some of the additional pseudo-elements we can always scale the resolution back in the discussion.