[csswg-drafts] [css-pseudo] Add ::backdrop and ::view-transitions to the CSSPseudoElement's allowed pseudo-elements list (#13804)

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

== [css-pseudo] Add ::backdrop and ::view-transitions to the CSSPseudoElement's allowed pseudo-elements list ==
[CSSPseudoElement](https://drafts.csswg.org/css-pseudo/#CSSPseudoElement-interface) is currently only defined for ::after, ::before and ::marker, but `::backdrop` and `::view-transition`s 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.
```JS
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-transition`s  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.
```JS
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.



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


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

Received on Tuesday, 14 April 2026 11:47:05 UTC