Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Use --dxp Styling Hooks in Custom Components

To build a custom Lightning web component for your site that uses the design system, use the appropriate --dxp styling hooks.

We recommend using --dxp styling hooks to make general changes across the components in your site. But if the --dxp branding defaults don’t provide exactly what you need, you can use --slds-c and --slds-g-color styling hooks to fine-tune the appearance of individual components where necessary.

Tip

This sample shows the code for a custom combobox component.

1<template>
2  <input type="text">
3  <ul>
4    <li>Option 1</li>
5    <li>Option 2</li>
6  </ul>
7</template>

To ensure that the input looks similar to other Lightning base components that also respond to branding changes, the CSS must reference the --dxp styling hooks as follows.

1input {
2  border-color: var(--dxp-g-neutral);
3}
4
5input:focus {
6  border-color: var(--dxp-g-brand);
7}

Values of CSS custom properties are resolved at the time of evaluation. For example, let’s say you have a CSS custom property that references another CSS custom property. If you update the value of the latter CSS custom property in a lower scope, the value of the former CSS custom property doesn’t reflect the new value.

Important

LWR Sites for Experience Cloud

Use --dxp Styling Hooks in Custom Components

See Also