NitiExam
CRM & SaaSv4.0Updated 2026-07

Lightning Web Components

Lightning Web Components (LWC) is Salesforce's web-standards-based component framework using Custom Elements, Shadow DOM, and ES Modules — delivering native browser performance for Salesforce UI.

Overview

  • 1LWC uses the browser's Web Components APIs directly — Custom Elements, Shadow DOM, and ES Modules.
  • 2Components are HTML + JavaScript + CSS files — same skills as modern web development.
  • 3Wire service provides reactive binding to Salesforce data without explicit fetch calls.
  • 4LWC 4.0 (Spring '26) improves TypeScript tooling, Shadow DOM flexibility, and adds Signals-like state.
  • 5LWC runs in Salesforce Platform, Experience Cloud sites, and as Lightning Out in external apps.

Key Features

Custom Elements — standard browser components; no virtual DOM overhead
Shadow DOM — style and DOM encapsulation between components
@wire decorator — reactive data binding to Salesforce Apex and platform data
@api decorator — expose properties and methods as public component API
@track (deprecated) — use reactive assignment instead since LWC 1.x
Lightning Data Service (LDS) — cache-aware CRUD without writing Apex
LWC OSS — run LWC outside Salesforce on Node.js for open-source projects

Component Structure

  • myComponent.html: template with {property} binding and lwc:if, lwc:for directives
  • myComponent.js: class extending LightningElement; @api, @wire, @track decorators
  • myComponent.css: scoped styles that apply only within this component's shadow root
  • myComponent.js-meta.xml: component configuration — targets, properties for App Builder
  • Slots: `<slot></slot>` allows parent to inject HTML into child component's shadow root
  • Lifecycle hooks: connectedCallback, disconnectedCallback, renderedCallback, errorCallback

Data & Wire Service

  • @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME] }) wiredAccount
  • @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: STATUS_FIELD })
  • LDS: getRecord, updateRecord, createRecord, deleteRecord — client-side cache with refresh
  • Apex wire: `@wire(searchAccounts, { searchTerm: '$term' }) accounts` calls an @AuraEnabled(cacheable=true) method
  • Imperative Apex: `const result = await getAccountDetails({ accountId: this.recordId })` for user-triggered actions
  • Error handling: wire returns `{ data, error }` — always handle both branches in template

Component Communication

  • Parent → Child: pass data via attributes `<c-child value={parentProp}></c-child>`
  • Child → Parent: dispatch custom event `this.dispatchEvent(new CustomEvent("select", { detail: this.value }))`
  • Parent listens: `<c-child onselect={handleSelect}></c-child>`
  • Unrelated components: Lightning Message Service (LMS) via MessageChannel publish/subscribe
  • @api method: parent calls child method directly via `this.template.querySelector("c-child").myMethod()`
  • Pub/Sub pattern: legacy; replace with LMS for cross-component communication

Base Components & SLDS

  • lightning-button, lightning-input, lightning-combobox, lightning-datatable — SLDS-styled base components
  • lightning-record-form: auto-generates create/view/edit form from field API names
  • lightning-record-edit-form + lightning-input-field: custom form with individual field control
  • lightning-card, lightning-accordion, lightning-tab, lightning-modal: layout components
  • SLDS utility classes: `slds-p-around_medium`, `slds-text-heading_large`, `slds-grid`
  • lightning-icon: uses SLDS icon set; `icon-name="utility:edit"` renders standard icons

Frequently Asked Questions

What is the difference between LWC and Aura components?

LWC is built on native web standards (Custom Elements, Shadow DOM, ES Modules) and runs natively in the browser — no Aura framework overhead. Aura components use a proprietary Salesforce client-side framework from 2014 that is slower and more complex. Salesforce recommends LWC for all new development. Aura is still supported for legacy components but receives minimal new features.

How does Shadow DOM work in LWC?

Shadow DOM encapsulates a component's internal DOM and CSS. Styles defined in myComponent.css only apply inside that component — they cannot leak out, and external styles cannot leak in. This prevents styling conflicts in multi-team Salesforce orgs. You can use `lwc:ref` and `this.refs` to access elements inside the shadow root from JavaScript.

When should I use @wire vs imperative Apex in LWC?

Use @wire for data that should load when the component renders and automatically refresh on record changes — ideal for display data. Use imperative Apex (async/await in button click handlers) when you need to call Apex in response to user action (form submit, button click), when the Apex method is not cacheable (writes data), or when you need fine-grained error handling and loading state control.