v130 · css

allow more pseudo-elements and pseudo-classes after ::part()

CSS selectors that use the ::part() pseudo-element are allowed to have other CSS pseudo-elements (except ::part()) and many types of other CSS pseudo-classes after them. (Combinators are still not allowed after :part(), and pseudo-classes that depend on tree structure are not allowed.) Previously Chrome only allowed a limited set of pseudo-classes and ps

concepts

  1. Pseudos after ::part()

    ::part() composition now accepts more pseudo-classes and pseudo-elements. Shadow-DOM design systems get richer styling hooks.

  2. Foundation for part-like pseudos

    The change exists to unblock ::details-content and customizable <select> pseudos. Stack ::part() with ::first-line, ::selection, and :placeholder-shown — chains rejected before Chrome 130.

  3. Theme swap (skinning marketplace)

    One shadow-DOM card, four host themes — Editorial, Brutalist, Minimal, Terminal — built entirely from chains like ::part(title)::first-letter and ::part(badge):hover::after. Each theme also reports which of its selectors would have failed pre-Chrome-130.

  4. Part State Machine

    Toggle component states (:hover, :focus, :active, :disabled, :checked) and see the CSS rules activate in real time. Live comparison of which host-document selector chains work — and which would have thrown errors before Chrome 130.

  5. Focus Ring via ::part()

    A <form-field> shadow component exposes its input via part="input". The host page applies a custom focus ring using form-field::part(input):focus-visible — a pseudo-class chain Chrome 130 newly accepts.

  6. Tooltip via ::part()::after

    A custom <info-card> element gets tooltips added from the host page using info-card::part(trigger)::after { content: attr(data-tip) }. The ::after pseudo-element chained to ::part() requires Chrome 130+. Toggle mode to simulate the pre-130 parser rejection.

why it shipped

This allows CSS selector features to be combined in ways that were intended during the design of the ::part() feature. It allows more styling of things that web components expose as parts.

references