Web Components Community 🔷

Web Components Community 🔷 is a community of amazing users

The Community Platform for Web Components Users and Developers

Create account Log in

Discussion on: Tiny trick - :where() for easily overridden default CSS

joehonton profile image
Joe Honton

I've been using CSS variables inside components for important user-customizable options such as color scheme, size and position. For example, the rwt-storyboard component lets users set things like this:

rwt-storyboard {
    --font-basis: 1.0;
    --width: calc(10rem * var(--font-basis));
    --height: calc(40rem * var(--font-basis));
    --color: var(--white);
    --background: var(--black);
    --button-color: var(--pure-white);
Enter fullscreen mode Exit fullscreen mode