Styling
Theme with tokens, ::part(), and documented CSS properties — avoid undocumented internals.
What to use
- Theme tokens —
--vu-color-*,--vu-space-*,--vu-radius-*from Theming - CSS parts —
::part(name)listed on each component's Parts table - Documented cssProps — only vars listed for that component (often short local names like
--btn-*)
/* Only parts listed in the component docs */
vu-dialog::part(header) {
font-weight: 600;
}
vu-button::part(base) {
letter-spacing: 0.02em;
}What to avoid
- Inline SVG icons — use Icons
- Override with
!importantinto the shadow tree - Assume undocumented internal class names are stable
- Invent global tokens without checking the theme provider
Prefer tokens and documented parts over fighting shadow DOM. Invented
--vu-* names or scraped internals break across releases.Common problems
| Problem | Fix |
|---|---|
| Styles do not reach inside the component | Use a documented ::part() or cssProp |
!important still fails | Do not pierce the shadow tree that way — use parts / tokens |
| Custom token does nothing | Stick to theme provider / documented component vars |
Next steps
- Theming
- Appearance
- Per-component Parts / CSS tables under Components