Introduction to CSS Custom Properties
We’ve learned how we as component authors can control the appearance of our component, but now it’s time to learn how we can provide hooks for consumers to tweak the styles to suit their needs.
As you’ll remember, the shadow DOM encapsulates the styles and behaviour of our component, so global CSS can’t be used to style any components that live within a shadow DOM. That doesn’t mean the consumer has no way of altering the styles, we just need to provide them with the styling hooks.
We’re going to look at one of these styling hooks, officially titled CSS custom properties, but they’re more commonly referred to as CSS variables. Let’s see them in action.
Imagine you run a very stylish dog grooming business. Your website may look like this:
You want to start capturing email addresses from your visitors and build up your mailing list, so you find a provider