demo · v130
Pseudos after ::part()
Toggle pseudo-classes and pseudo-elements after ::part() and see them apply live to a shadow-DOM custom element below. Hover, focus, generated content, selection, and first-line styling compose now, while structural selectors still stay outside the part boundary.
Focus status will appear here.
selector boundary probe
Each card runs CSS.supports("selector(...)") against the exact selector shown. Green means the selector grammar is allowed after ::part(); red means the browser still rejects that chain.
the code
my-button::part(button):hover {
background: var(--accent-blue);
color: var(--bg-ivory);
}
my-button::part(button):focus-visible {
outline: 3px solid var(--accent-emerald);
}
my-button::part(button)::before {
content: "★ ";
color: var(--accent-rose);
}
/* Still rejected: structural or deeper shadow-tree selectors */
my-button::part(button) > .icon {}
my-button::part(button):has(.icon) {}
my-button::part(button):nth-child(2) {}
my-button::part(button)::part(icon) {}