CSSPseudoElement

Description

A very good and detailed explainer for CSSPseudoElement can be found here.

For Interop 2027, it would be great to have this available cross-engine. It is currently only available in Chromium and behind a flag in Firefox.

My primary motivation is for the ::backdrop pseudo element. Currently to detect backdrop clicks, it requires elaborative hacky workarounds such as event.target, getBoundingClientRect(), extra divs etc. They shouldn't be needed.

Example

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

• https://github.com/danielsakhapov/CSSPseudoElementDoc
• https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement
• https://github.com/w3c/uievents/pull/413
• https://github.com/w3c/csswg-drafts/issues/13804

Specification

W3C

web-feature

https://github.com/web-platform-dx/web-features/issues/4306

Test Links

• https://wpt.fyi/results/css/css-pseudo/backdrop-pseudo-element-click.tentative.html?label=master&label=experimental&aligned&q=backdrop
• https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&aligned&q=CSSPseudoElement

Additional Signals

• https://chromestatus.com/feature/6516055192240128
• https://github.com/WebKit/standards-positions/issues/607
• https://github.com/mozilla/standards-positions/issues/1345

Start by reading the CSSPseudoElement explainer, the MDN page, and the linked W3C UI Events and CSSWG discussions. Run the linked WPT results for CSSPseudoElement and backdrop-pseudo-element-click.tentative.html, then use the standards-position links to understand cross-engine status; done means the feature is available across the relevant engines and the backdrop-click test passes.