The ::part() pseudo-element selects a shadow-tree element whose part attribute exposes the named part on its host. The component author chooses that public name. It does not reveal the entire shadow tree, and a part inside another shadow root must be forwarded through exportparts before an outer consumer can target it.
Make this comfortable
CSS ::part(): expose a narrow styling surface across Shadow DOM
When to use it
A document-review badge exposes its visible label as part="label". A consuming application adjusts its weight and underline treatment to suit a dense review list. The badge still supplies a readable default when no outside rule exists. Treat the part name as a versioned styling contract: renaming it can break an integrator even when the visual markup still appears correct. Keep state semantics in the component's HTML and application logic; coloring a label does not make a rejected document accessible to a screen reader. Test the outside rule against default, hover, focus, disabled, and forced-color states. If the badge wraps a second custom element with its own shadow root, explicitly forward the needed part rather than promising that the outer selector crosses both boundaries.
review-badge::part(label) { font-weight: 700; text-decoration-thickness: .12em; text-underline-offset: .16em; }
review-badge[status="held"]::part(label) { text-decoration-line: underline; }Cost and verification
The rule adds little runtime work; public API stability is the larger cost. A theme that relies solely on color can erase the distinction between held and accepted states under forced colors or print. The sample adds an underline, but the component should also show the state in text. A public part is less brittle than reaching into a private class that an implementation may rename. Do not assume every pseudo-class or structural selector can be appended after ::part(); check the exact selector you need in target browsers. If the public name is forwarded through a nested host, verify that the exportparts mapping is correct in the actual markup.
Common Mistakes
- Do not assume ::part() exposes arbitrary shadow descendants.
- Do not forget exportparts across a nested shadow root.
- Do not make color the only status signal.
Connected lessons
css
reference
web