demo · v130
Theme swap (skinning marketplace)
One shadow-DOM card component, four host themes — built entirely with the pseudo-classes and pseudo-elements that Chrome 130 unblocked after ::part(). Switch the theme; the same internal markup is restyled with ::first-letter, ::first-line, ::selection, :hover::before, and :hover::after.
pick a theme
hover the badge / title and select the body text
selectors used by current theme (rejected pre-Chrome 130 in italic)
the code
/* All four selectors below were parser-errors before Chrome 130. */
ds-card::part(title)::first-letter { font-size: 2.4em; }
ds-card::part(badge):hover::after { content: " — pinned"; }
ds-card::part(body)::first-line { font-variant: small-caps; }
ds-card::part(body)::selection { background: var(--text-black); }