User Interface · Topic 2 of 4

Lightning Web Components: Framework, Benefits and Events

Lightning Web Components for Platform Developer: files, decorators, lifecycle hooks, events, Lightning Message Service and Lightning Data Service.

4 min
Includes a diagram

In a nutshell

LWC is built on web standards; a component has HTML, JS and a meta XML file.
@api public, @wire reactive data, @track for deep changes in objects and arrays.
Lifecycle: constructor, connectedCallback, renderedCallback, disconnectedCallback, errorCallback.

What it is

Lightning Web Components (LWC) is Salesforce's programming model for UI components, built on web standards: custom elements, shadow DOM, modules and standard JavaScript. Because most of the work is done by the browser, components are fast and the skills transfer from general web development.

Components communicate with properties (down) and events (up), and read data with Lightning Data Service or Apex.

How it works

Component files

File	Purpose
`myComponent.html`	Template inside `<template>`
`myComponent.js`	Class that extends `LightningElement`
`myComponent.js-meta.xml`	Exposure and targets, such as `lightning__RecordPage`, `lightning__AppPage`, `lightning__HomePage`, `lightning__FlowScreen`
`myComponent.css`	Styles scoped to the component

Set <isExposed>true</isExposed> and add targets to use the component in Lightning App Builder, Experience Builder or Flow.

Decorators

Decorator	Use
`@api`	Public property or method the parent can set or call
`@track`	Deep tracking of changes inside objects and arrays; plain fields are already reactive
`@wire`	Reactive data from a wire adapter or an `@AuraEnabled(cacheable=true)` Apex method

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME from '@salesforce/schema/Account.Name';

export default class AccountHeader extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME] }) account;
    get name() { return getFieldValue(this.account.data, NAME); }
}

The $ prefix makes recordId reactive: the wire runs again when it changes.

Lifecycle hooks

Hook	Runs
`constructor()`	Component created; call `super()` first; do not touch child elements or attributes
`connectedCallback()`	Inserted into the DOM; good for loading data and subscribing
`renderedCallback()`	After every render; guard against repeated work
`disconnectedCallback()`	Removed from the DOM; clean up and unsubscribe
`errorCallback(error, stack)`	Catches errors in child components

Template directives

lwc:if, lwc:elseif, lwc:else for conditions.
for:each with a unique key on each item, or iterator.
onclick={handleClick} binds an event handler; {property} binds a value.

Communication

Lightning Web Components communication: a parent sets an @api property or calls an @api method on a child, the child dispatches a CustomEvent to the parent, and unrelated components use a Lightning Message Service channel to publish and subscribe.

Direction	Mechanism
Parent to child	Set an `@api` property or call an `@api` method
Child to parent	`this.dispatchEvent(new CustomEvent('select', { detail: id }))`; parent listens with `onselect`
Unrelated components on a page	Lightning Message Service with a message channel
Beyond the parent	Event options `bubbles: true` and `composed: true`

Event names are lowercase, without the on prefix; the listener attribute adds on.

Lightning Data Service

lightning-record-form, lightning-record-view-form and lightning-record-edit-form, plus the lightning/uiRecordApi adapters, read and save records without Apex. They respect sharing and field-level security and share a cache, so every component showing the record stays in sync.

A worked example

A list component shows contacts, and a detail panel elsewhere on the record page must show the contact the user clicks. The two components are not parent and child. The developer publishes the selected Id on a Lightning Message Service channel from the list, and the panel subscribes in connectedCallback and unsubscribes in disconnectedCallback. If the panel were a child of the list, an @api property would be simpler.

Exam tip

For a form that edits one record with standard layout behaviour, choose a Lightning Data Service base component before writing any Apex.

How the exam asks about this

"Let the parent pass a value to the child." @api property.
"Notify the parent that a row was selected." Dispatch a CustomEvent.
"Two components in different regions of the page." Lightning Message Service.

What to remember for the exam

LWC is built on web standards; a component has HTML, JS and a meta XML file.
@api public, @wire reactive data, @track for deep changes in objects and arrays.
Lifecycle: constructor, connectedCallback, renderedCallback, disconnectedCallback, errorCallback.
Properties down, events up, Lightning Message Service across.
Lightning Data Service reads and saves records without Apex and respects security.

Watch out

Changing a reactive property inside renderedCallback() causes another render, and can loop. Use a flag to run the code only once.

Common mistakes

Naming an event onSelect or with capitals. Use lowercase names such as select.

Calling a non-cacheable Apex method with @wire. Wired Apex must be @AuraEnabled(cacheable=true).

Accessing child elements in the constructor. They do not exist yet.

Check yourself

How does a child component send data to its parent?
It dispatches a CustomEvent, usually with the data in detail.
Which decorator exposes a property for a parent or App Builder to set?
@api.
How do two unrelated components on the same page communicate?
Through Lightning Message Service, using a message channel.

Topic 2 of 4 in User Interface

Test yourself on User Interface

The full Salesforce Platform Developer question bank has 645 questions, with timed practice exams and an explanation for every answer.

Subscribe Try Sample Exam

This study guide is independent and is not affiliated with, endorsed by, or sponsored by Salesforce. Vendor names, certification names and exam codes are trademarks of their respective owners and are used for identification only.