← Chrome 152 reference

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 152Enabled by default (previously developer trial, behind a flag, from Chrome 147)
Builds onCSSPseudoElement interface (ships enabled by default in Chrome 147)
New pseudo-elements added::backdrop, ::scroll-marker, ::view-transition*
ChromeStatus6516055192240128 — CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions
Source: chromestatus.com/feature/6516055192240128

syntax

The CSSPseudoElement interface provides a JavaScript handle for pseudo-elements, obtained via Element.prototype.pseudo(type):

partial interface Element {
  CSSPseudoElement? pseudo(CSSOMString type);
};

The type parameter accepts a pseudo-element selector string. When type does not match a supported or rendered pseudo-element, the method returns null rather than throwing an exception (per CSS Pseudo-Elements Level 4 §7.2). Chrome 152 expands supported types to include ::backdrop, ::scroll-marker, and view-transition pseudo-elements:

Pseudo-elementUse case
::backdropThe 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-markerThe 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 pseudo-elements (::view-transition, ::view-transition-group(), ::view-transition-image-pair(), etc.) created during a view transition. Accessing them enables geometry queries and style inspection during animation.
Source: CSS Pseudo-Elements Level 4 §7.2; ChromeStatus feature 6516055192240128.

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());
}
Source: chromestatus.com/feature/6516055192240128

browser compatibility

BrowserSupport
ChromeChrome 152+ (enabled by default; Chrome 147-151 behind experimental flag)
EdgeEdge 152+
FirefoxNo signal (mozilla/standards-positions #1345)
SafariNo signal (WebKit/standards-positions #607)

Security and privacy: Access to pseudo-elements via pseudo() is bounded by existing DOM element access; script cannot inspect or manipulate pseudo-elements of elements it cannot already access, preserving the origin security model.

Source: ChromeStatus feature 6516055192240128; standards positions linked above.

see also