Styling Hooks for Lightning Web Components

So today we will check what are Styling Hooks and how we can create Styling Hooks for Lightning Web Components. With existing Lightning Web Components its hard for the developers to do CSS customization. We need to use hacks to overwrite CSS and with any UI update they might stop working. So from Winter 21 Salesforce introduce Styling hooks.

Styling hooks provide a way for us to customize the default appearance of our LWC-based Base Components in a supported, maintainable, and intuitive way.

Styling hooks are powered by CSS Custom Properties, a standards-based way to define reusable style values that work well in an encapsulated, web component-based environment. A styling hook is a placeholder in the SLDS style sheet, for example, var(--sds-c-badge--color-background, #ecebea), which enables us to customize the style using the corresponding --sds-c-badge-color-background CSS custom property.

Naming Conventions

Styling hooks follows a specific naming convention to promote predictability and consistency. All of CSS custom properties adhere to the following convention:

COMPONENT_ELEMENT_CATEGORY_PROPERTY_ATTRIBUTE_STATE

• Component — [required] Name of the component
• Element — [optional] Name of the element of the component
• Category — [required] Indicates the category of the custom property.
• Property — [optional] Semantic UI property being described.
• Attribute — [optional] Semantic characteristic of a property.
• State — [optional] If necessary, the state of a custom property when used in the context of interaction design. E.g. hover, focus, selected

Now we will check what does this code mean

var(…)

This is a CSS function which we allow us to use the stored value of a custom CSS property. It accept two property one css custom property and one fallback.

–sds

Declaring a custom property requires that the name begins with double hyphens (--). sds is a namespace reserved for Salesforce’s design system.

-c

This identifier indicates that the custom property is a component-level customization. It is specific to the component it resides in and does not affect unrelated components.

-badge

badge refers to the name of the component that is being targeted by the custom property. For example, we can use button, alert, card etc.

-color

There are several categories that classify naming conventions. In this instance, -color identifies the category that this CSS custom property falls under.

-background

This is the semantic user interface property being customized. For example, other supported values are border, background color etc.

You can check Component Blueprint to identify which all components support styling hooks.
So now we will create a basic component in which we will overwrite CSS using styling hooks. We will overwrite different CSS property as a result we will totally change the look and feel.

Code Sample for Styling Hooks for Lightning Web Components

stylingHookDemo.html

<template>
    <lightning-card title="Styling Hooks for Lightning Web Components" icon-name="action:fallback">

        <lightning-avatar src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" initials="TS" fallback-icon-name="standard:person_account" alternative-text="Tushar Sharma"  class="avatar"></lightning-avatar>
        <br/>
        <lightning-badge label="Alpha" icon-name="standard:event" class="badge"></lightning-badge>
        <br/>
        <lightning-button label="Neutral" title="Non-primary action" class="slds-m-left_x-small button"></lightning-button>
    </lightning-card>
</template>

stylingHookDemo.css

.avatar{
    --sds-c-avatar-radius-border: 1rem;
    --sds-c-avatar-text-color: rgb(111, 111, 128);
    --sds-c-avatar-initials-text-color: rgb(111, 111, 128);
    --sds-c-avatar-initials-text-color-hover: rgb(111, 111, 128);
}

.badge{
    --sds-c-badge-color-background: rgb(223, 20, 20);
    --sds-c-badge-color-border: rgb(223, 20, 20);
    --sds-c-badge-sizing-border: 10px;
}


.button{
    --sds-c-button-shadow:rgb(32, 204, 83);
    --sds-c-button-shadow-focus:blue;
    --sds-c-button-inverse-shadow-focus:rgb(148, 72, 114);
    --sds-c-button-neutral-color-background:rgb(255, 123, 0);
    --sds-c-button-neutral-color-border-hover:rgb(216, 119, 27);
}

So this is how our CSS customization will look like. In short, we can change all supported attribute using custom CSS attribute.

In conclusion, Salesforce Lightning Design System (SLDS) styling hooks for Lightning Web Components make easy to customize styling in supported way. So now we don’t need to worry about our future dom change which will overwrite our CSS customization.

Did you like the styling hooks, let me know how you are planning to use them in comments. Happy Programming 🙂