Base Components, SLDS and Styling

Lightning Web ComponentsBase Components, SLDS and StylingUse the Lightning base component library effectively (including a production-grade lightning-datatable), style components the supported way with SLDS 2, global styling hooks and dark mode, understand CSS in shadow DOM and Light DOM, load third-party libraries, and build accessible, responsive UIs.Intermediate · about 90 minutesWhat you will learn

Choose the right base component for inputs, data display, layout, actions and feedback

Build a lightning-datatable with sorting, inline editing, infinite loading, row actions and a custom data type

Apply SLDS blueprints and utility classes and explain what SLDS 2 and the Salesforce Cosmos theme change

Style components with global styling hooks (--slds-g-*), migrate legacy design tokens and validate with SLDS Linter

Write CSS that works in shadow DOM, style base components safely and decide when Light DOM is appropriate

Load third-party JavaScript and CSS from static resources with lightning/platformResourceLoader

Make components accessible, keyboard-friendly and responsive, and ready for dark mode

Contents

Base components: what you get

Catalogue by category

lightning-datatable in depth

SLDS: blueprints and utility classes

SLDS 2 and the Salesforce Cosmos theme

Styling hooks

Dark mode

CSS in shadow DOM

Light DOM

Static resources and third-party libraries

Icons and custom SVG

Accessibility

Responsive layouts and form factors

Best practices

Common pitfalls

Hands-on exercises

Key takeaways