Update Base Lightning Web Components Styling

Base Lightning web components (LBCs) implement Salesforce Lightning Design System (SLDS) component blueprints and styling. For SSR environments, LBCs render in native shadow. Native shadow blocks global styles from being applied to individual components, which means that your existing styling rules sometimes don’t work as expected anymore. For a list of LBCs that support SSR, see Use Supported Base Components.

To achieve your styling goals in native shadow, use SLDS styling hooks that are assigned to specific parts of the component with the ::part CSS pseudo function.

Here’s an example of how you can modify your existing styling rules. Let's say you use SLDS styling hooks to customize the text colors on your buttons.

In this example, the values aren’t applied to lightning-button. The lightning-button component's internals become untargetable because of the native shadow boundary.

The previous example renders the following result:

Website that renders "got it" button text in blue instead of white.

In the footer, the got it button text renders in blue instead of white.

To fix this styling issue, apply ::part(button) with the same rules:

Using ::part(button) results in the correct styles getting applied to the button.

Website that correctly renders "got it" button.

See Also