JPs Blog

Introduction

Styling in Lightning Web Components (LWC) follows standard web development practices with the added advantage of Salesforce Lightning Design System (SLDS). LWC provides multiple ways to apply styles to components while maintaining encapsulation.

Different Ways to Style LWC

1. Scoped CSS (Component-specific CSS)
2. SLDS Utility Classes
3. Global Styling via :host() and ::slotted()
4. Dynamic Styling with JavaScript
5. External Stylesheets (Static Resources)

1. Scoped CSS (Component-Specific Styling)

Each LWC component has its own CSS file (.css) that applies styles only within the component’s scope.

Example: Styling a Button in a Component

LWC HTML (buttonStyle.html)

<template>
    <lightning-button label="Click Me" class="custom-btn"></lightning-button>
</template>

LWC CSS (buttonStyle.css)

.custom-btn {
    background-color: #0070d2; /* Salesforce Blue */
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

Explanation:

• The .custom-btn class applies styles to the button.
• Scoped CSS prevents leakage to other components.

2. Using SLDS Utility Classes

Salesforce provides SLDS Utility Classes for common styling needs without writing custom CSS.

Example: Using SLDS for Layout & Styling

LWC HTML (sldsExample.html)

<template>
    <div class="slds-box slds-p-around_medium slds-text-align_center">
        <p class="slds-text-heading_medium slds-text-color_success">SLDS Styled Content</p>
    </div>
</template>

Explanation:

• slds-box: Adds a bordered container.
• slds-p-around_medium: Adds padding.
• slds-text-heading_medium: Adjusts text size.
• slds-text-color_success: Applies green color.

SLDS classes eliminate the need for custom CSS in most cases.

3. Global Styling with :host() and ::slotted()

When working with shadow DOM, global styles do not apply automatically. Use :host() and ::slotted() to style root elements and slots.

Example: Using :host()

LWC CSS (hostExample.css)

:host {
    display: block;
    background-color: #f3f2f2;
    padding: 10px;
    border-radius: 8px;
}

Example: Using ::slotted() for Slots

LWC HTML (slotExample.html)

<template>
    <slot></slot>
</template>

LWC CSS (slotExample.css)

::slotted(p) {
    color: red;
    font-size: 18px;
}

Explanation:

• :host() styles the root component.
• ::slotted() styles content passed inside <slot>.

4. Dynamic Styling with JavaScript

LWC allows you to apply styles dynamically using JavaScript.

Example: Changing Button Color on Click

LWC JavaScript (dynamicStyle.js)

import { LightningElement } from 'lwc';

export default class DynamicStyle extends LightningElement {
    handleClick() {
        this.template.querySelector('button').style.backgroundColor = 'red';
    }
}

LWC HTML (dynamicStyle.html)

<template>
    <button onclick={handleClick}>Click to Change Color</button>
</template>

Explanation:

• Uses querySelector() to modify styles dynamically.
• Useful for interactive components.

5. External Stylesheets (Static Resources)

To reuse styles across multiple LWC components, upload a CSS file as a static resource and include it.

Steps to Use External Stylesheet

1. Upload a CSS file to Static Resources in Salesforce.
2. Import it using loadStyle() from lightning/platformResourceLoader.

Example: Using External CSS

LWC JavaScript (externalCss.js)

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import myStyles from '@salesforce/resourceUrl/myStyles';

export default class ExternalCss extends LightningElement {
    connectedCallback() {
        loadStyle(this, myStyles);
    }
}

Explanation:

• Upload myStyles.css as a static resource.
• Load it inside connectedCallback() to apply globally.

Conclusion

• Use Scoped CSS for component-specific styles.
• Prefer SLDS Utility Classes to reduce custom styling.
• Use :host() and ::slotted() for shadow DOM styling.
• Apply dynamic styles using JavaScript when needed.
• Use External Stylesheets for reusable styles.

In the next post, we will explore Lightning Data Table in LWC.

Stay tuned! 🚀