v152 · shipped · css · pseudo-elements
CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions
Chrome 147 extends the CSSPseudoElement interface — returned by Element.pseudo(type) — to cover three additional pseudo-element types: ::backdrop, ::scroll-marker, and the view-transition pseudo-elements (::view-transition, ::view-transition-group(), etc.). Ships enabled by default in Chrome 152 (it was available behind a flag from Chrome 147).
at a glance
| Status in Chrome 152 | Enabled by default (previously developer trial, behind a flag, from Chrome 147) |
|---|---|
| Builds on | CSSPseudoElement interface (ships enabled by default in Chrome 147) |
| New pseudo-elements added | ::backdrop, ::scroll-marker, ::view-transition* |
| ChromeStatus | 6516055192240128 — CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions |
what this extends
The CSSPseudoElement interface (shipping in Chrome 147) provides a JavaScript handle for pseudo-elements via element.pseudo(':before') and element.pseudo(':after'). This feature widens the set of pseudo-elements reachable through the same API.
| Pseudo-element | Use case |
|---|---|
::backdrop | The full-screen backdrop rendered behind <dialog> and fullscreen elements. Access it as dialog.pseudo('::backdrop') to read its computed style or attach event listeners. |
::scroll-marker | The marker pseudo-elements generated by Scroll Snap / Scroll Marker Groups. Accessing these lets JavaScript collect metrics or programmatically interact with snap targets. |
::view-transition, ::view-transition-group(), ::view-transition-image-pair(), etc. | View-transition pseudo-elements created during a startViewTransition() call. Accessing them enables geometry queries and style inspection during the transition. |
example
// Works in Chrome 152+ (Chrome 147-151: required the experimental-web-platform-features flag)
const dialog = document.querySelector('dialog');
dialog.showModal();
// Access the ::backdrop pseudo-element
const backdrop = dialog.pseudo('::backdrop');
if (backdrop) {
const style = backdrop.computedStyleMap();
console.log('backdrop background:', style.get('background-color'));
// Listen for clicks on the backdrop to close the dialog
backdrop.addEventListener('click', () => dialog.close());
}