How would you recommended styling custom elements

Note this idea is based from https://material.io/design/material-theming/implementing-your-theme.html#color

While you can just have class names and style it in a CSS file, the idea is to not have dependencies

An idea can be to use CSS variables to customize a theme or layout.

--primary: ;
--on-primary: ;

--accent: ;
--on-accent: ;

--background: ;
--on-background: ;

--surface: ;
--on-surface: 

The CSS variable can be used to customize a suite of custom elements that follow a pattern for a theme and layout

background-color: var(--surface, #999);
color: var(--on-surface, #eee);

Some helpful links

• Can I use- CSS Variables
• MDN - Using CSS Variables