Create Styling Hooks for Your Components
To expose styling hooks for your custom components, use CSS custom properties. CSS custom properties also make code easier to read and update.
Document your component's styling hooks as part of your component's API. To change a component's style, a consumer simply sets values for the styling hooks—they don't need to know how you implemented the styles.
To define a CSS custom property in a component's stylesheet, prefix the property with --. To insert the value of the property, use var().
A CSS custom property inherits its value from its parent component. Inherited properties pierce the shadow DOM. Some CSS properties, like color, are also inherited. Because CSS custom properties are inherited, a consumer can set their values at a higher level in the DOM tree and style your component.
These CSS custom properties create styling hooks for two themes: light and dark. Pass the fallback value as an optional second parameter to var().
Experiment with this code in playgrounds at lwc.dev.
The lwc-recipes repo has a miscStylingHooks component that demonstrates SLDS styling hooks.
See Also