Mastering Lightning Web Component (LWC) Styles: A Quick Guide to Styling Hooks

If you’ve ever tried to change the background color of a pre-built component from the LWC component library, that you are using within your own custom Lightning Web Component (LWC) you are building, your first attempt was likely somewhat confusing. Maybe you added a standard CSS class, set the background-color to green, saved the LWC, and yet… it still has its default blue background color.

Why does this happens? And more importantly, how do you fix it without tearing your hair out?

In this post, we’re breaking down how to solve this exact problem using Styling Hooks.

The Problem: Shadow DOM vs. Standard CSS

When you use a pre-built component like <lightning-button>, you are dealing with a component protected by the Shadow DOM. This encapsulation ensures that the component’s internal structure isn’t accidentally broken by global styles.

However, it also means that standard CSS selectors (like .my-custom-class { background-color: green; }) often fail to penetrate that barrier. They can’t reach the internal <button> element inside the lightning-button.

The Solution: Styling Hooks

Salesforce provides a mechanism called Styling Hooks to safely customize the appearance of these components. These are essentially CSS Custom Properties (variables) that the component explicitly exposes for you to override.

How to Implement It

Let’s say you have a standard brand button that defaults its background color to blue, but you want it to be green.

The HTML:

You don’t actually need a custom class on the button itself for this method if you want to target the component generally, but you can target the host or specific classes.

HTML

<lightning-button variant="brand" label="Submit"></lightning-button>

The CSS:

Instead of trying to override the class directly, you target the Styling Hook.

Use the :host selector to target the component instance.
Define the specific Styling Hook variable. The syntax generally follows the pattern: --slds-c-[component]-[variant]-[property].

To change the background color of a brand button, your CSS would look like this:

CSS

:host {
    /* Pattern: --slds-c-button-brand-color-background
       Target: The background color of the 'brand' variant button
    */
    --slds-c-button-brand-color-background: green;
}

Once you save and deploy, your button will render with the new green background, respecting the component’s internal structure while applying your custom design.

Important Caveat: SLDS 2 Compatibility

Before you go changing every button in your Org, there is one crucial limitation to be aware of.

Styling Hooks are currently NOT supported in SLDS 2 themes.

If your Salesforce Org is using a “Salesforce Lightning Design System 2” theme (which you can check under Setup > Themes and Branding), these hooks might not work. Compatibility is expected in the near future, but if you see a theme with an “SLDS 2” marker, your styling hooks are unlikely to work in many scenarios.

Summary

Styling LWC base components doesn’t have to be a fight against the Shadow DOM. By using Styling Hooks, you can customize colors, spacing, and more in a way that is supported and safe.

Don’t: Rely on standard CSS overrides for base components.
Do: Use Styling Hooks (CSS Custom Properties).
Check: Your Org’s active theme for SLDS 2 conflicts.

Happy coding!

Need help with your Salesforce Org?

If you need help with your Salesforce org, schedule an hour of consulting time with me! I’m one of only ~500 Salesforce Certified Technical Architect’s (CTA) worldwide and I’ve spent over 30,000 hours building Salesforce implementations over the last decade!

Schedule and hour of consulting with me here!

Do you want to be the next Salesforce Certified Technical Architect (CTA)?

If you need training to help you on your journey to complete your Salesforce CTA Board then why not sign up for the cheapest Salesforce CTA course out there, with someone who has training over a million Salesforce professionals worldwide! You can check out and enroll in the course below!

Sign up for the CTA course here!

Or if a course isn’t your thing, you can always sign up for an hour long CTA study session with me here:
Schedule 1-on-1 CTA Coaching Here!

Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!

Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram

Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

AI DISCLAIMER: Gemini assisted me in writing this blog post by analyzing and summarizing the contents on the YouTube video I created that is linked at the top of this post.

Mastering Lightning Web Component (LWC) Styles: A Quick Guide to Styling Hooks

The Problem: Shadow DOM vs. Standard CSS