Salesforce introduced styling hooks feature in Lightning design system from spring’22 release and now it is available for Global Audience (GA) use. It has been extremely hard for the developers to customize the designs on Lightning Web Components (LWC) since it has been built with shadow DOM (Document Object Model); things get even more hard when traversing through the DOM elements and styling them. So finally, Salesforce produced an excellent feature called Styling hooks that uses CSS Custom Properties to express the brand look and feel. So before getting started, let us learn about the CSS custom properties.
CSS Custom Properties
Custom properties are nothing but the CSS Property values specified at a place and can be reused across the document
Ex: –main-color: black;
And this needs to be used with the var() function.
Ex: color: var(–main-color);
Custom Properties allows us to store the values at one place and provisions to be used in multiple places. Consider, you are building a large website and sometime the same font color needs to be specified in many places and when it comes to change, this needs to find the places wherever specified and must replace the value. So instead of doing this, developers can use the custom properties and replace the value at one place and the referenced places automatically get the new change.
This is the best practice to define the custom properties at the root pseudo-class; so that, it can be accessed across the website!
- Custom property values are automatically inherited from parent to child elements when no value is specified for the child.
- Custom properties provisions are used to define fallback values using var() function. If the specified property is no longer available, then the control uses the fallback value. We can define multiple fallback values.
To learn more about the Custom Properties, click here.
Now, let us get back to the concept of styling hooks, and here you can see how the styling hooks are constructed using custom properties. Lightning design system official website has a bunch of information about styling hooks for every component like input, button, card, modal, etc. The picture below shows available styling hook names. This styling hooks overview section is available for every component.
click here to visit the Styling Hooks Overview Section for the SLDS button.
Styling hooks follow a standard naming convention to promote consistency and predictability. Every styling hook name must follow the given naming convention.
The standard naming convention of styling hooks requires the following identifiers listed below:
Example of styling hooks
// Namespace + Scope + Component + Category + Property
Source: Styling Hooks Naming Convention.
Here I have shown a picture demonstrating how the styling hooks work.
Let us create an LWC component named “stylingHooks” and leave the JS file as it is. All we need to do is to create a CSS file with the same name as the component. We are going to transform the background color and some other properties using styling hooks
So, you can see I have added the properties inside the host pseudo-class. In the above, I stated that using the root pseudo selector is the best practice to add custom properties. The thing we need to know here is that the LWC (Lightning Web Components) adds properties in “: root” pseudo-class by default; so, we could not use :root in LWC;hence we should use “:host” to add our custom properties.
Now, we have completely changed the brand button; so, whenever we use this button on the website or community portal, we do not need to style everywhere. It is as simple as that. Hope you got some understanding of how styling hooks work.
Every business wants to show their own brand feel to the community on their websites or portal dashboards. The problem in Salesforce is that it is designed to show their own brand feel and looks to the audience. Now, Salesforce has opened a path for the developers to design according to the need of the business design requirements using the styling hooks.