LWC

Lightning Web Components (LWC)

Lightning Design System (SLDS)

There are many others like it that you can use directly without writing custom CSS.

Containers & Layout

• lightning-card – for grouping content with a title and body.
• lightning-layout – flexible grid layout system.
• lightning-layout-item – child item for layout.
• lightning-accordion – collapsible sections.
• lightning-tabset – tabs container.
• lightning-tile – for list items like records.
• lightning-tree – hierarchical tree view.

Form & Input

• lightning-input – text, number, date, etc.
• lightning-combobox – dropdown picklist.
• lightning-dual-listbox – dual select list.
• lightning-slider – range slider.
• lightning-textarea – multi-line input.
• lightning-radio-group – radio buttons.
• lightning-checkbox-group – group of checkboxes.

Buttons & Navigation

• lightning-button – standard button.
• lightning-button-icon – icon button.
• lightning-button-menu – dropdown action menu.
• lightning-breadcrumbs – navigation breadcrumbs.
• lightning-menu-item – inside menus.
• lightning-pill – tag-like UI element.

Data Display

• lightning-datatable – interactive table with sorting, inline edit.
• lightning-formatted-text – display plain text with formatting.
• lightning-formatted-date-time – display date/time.
• lightning-formatted-url – clickable links.
• lightning-formatted-number – formatted numbers.
• lightning-record-form – auto-generated form for an object.
• lightning-record-view-form – view record data.
• lightning-record-edit-form – editable form.

Messaging & Feedback

• lightning-spinner – loading indicator.
• lightning-progress-bar – progress indicator.
• lightning-progress-indicator – steps indicator.
• lightning-toast (via ShowToastEvent) – popup messages.
• lightning-badge – small label indicators.

Miscellaneous

• lightning-map – show maps with markers.
• lightning-icon – SLDS icons.
• lightning-image – display images.
• lightning-carousel – image/content carousel.
• lightning-avatar – user/product avatars.
• lightning-vertical-navigation – sidebar navigation.

<template if:true={isVisible}>
    <p>This shows only when isVisible = true.</p>
</template>
<template if:false={isVisible}>
    <p>This shows only when isVisible = false.</p>
</template>

Decarators

Get Isurulakmal’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in
1. @api

• Marks a public property or method.
• Can be set from the parent component (data flows from parent → child).
• Also used to expose public methods to parent components.

Example (public property):

example For Property : 

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api recordId; // parent can pass this
}

Example (public method):

import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api
    refreshData() {
        // parent can call this
    }
}

2. News Wire Usa

• Used to connect a property or function to a Salesforce data source (like Apex, LDS, or UI API).
• Framework automatically manages reactivity and caching.

Example (wire to Apex):

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class MyComp extends LightningElement {
    @wire(getAccounts) accounts; // accounts.data, accounts.error
}

Example (wire with parameters):

import { LightningElement, wire, api } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class MyComp extends LightningElement {
    @api recordId;

    @wire(getContacts, { accountId: '$recordId' })
    contacts; // reactive, refreshes if recordId changes
}

3. @track

• Makes a property reactive, so changes trigger re-rendering.
• In modern LWC (since Spring ’20), primitive values (string, number, boolean) are reactive by default, so you usually don’t need @track.
• But for objects/arrays, you need @track if you are mutating them directly.

Example (array/object changes):

import { LightningElement, track } from 'lwc';

export default class MyComp extends LightningElement {
    @track items = [];

    addItem() {
        this.items.push({ id: Date.now(), name: 'New Item' });
        // Without @track, UI will not update
    }
}

Quick Summary for decarators

• @api → Makes property/method public (accessible to parent).
• @wire → Reactive connection to Salesforce data (Apex, LDS, UI API).
• @track → Makes complex data types (object/array) reactive (not much needed now if you reassign).

LWC .XML

• Root structure

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    ...
</LightningComponentBundle>

• apiVersion

Specifies the API version used by the component.

<apiVersion>63.0</apiVersion>

• isExposed

Controls whether the component is available to Lightning App Builder, Flow, etc

<isExposed>true</isExposed>

• masterLabel (Optional — visible as component name in App Builder)

<masterLabel>My LWC Component</masterLabel>

• description (Optional — description for admins)

<description>This component displays product images.</description>

• targets

<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__FlowScreen</target>
    <target>lightning__HomePage</target>
    <target>lightning__Tab</target>
    <target>lightning__RecordAction</target>
    <target>lightning__AppPage</target>
    <target>lightning__UtilityBar</target>
    <target>lightning__NavigationItemPage</target>
    <target>lightning__ExperienceHome</target>
    <target>lightning__RecordRelationshipPage</target>
    <target>lightning__ServiceNotAvailable</target>
    <target>lightning__OmniScript</target>
</targets>

• supportedFormFactors

<supportedFormFactors>
    <supportedFormFactor type="Large"/>  <!-- Desktop -->
    <supportedFormFactor type="Small"/>  <!-- Mobile -->
</supportedFormFactors>

• targetConfigs

Defines design-time configuration for each target.
This is how you create App Builder / Flow Builder properties.

<targetConfigs>
    <targetConfig targets="lightning__RecordPage, lightning__AppPage">
        <property name="title" type="String" label="Title"/>
        <property name="showImage" type="Boolean" label="Display Image"/>
    </targetConfig>
</targetConfigs>

• Inside <targetConfig> — Available Elements

Creates design-time input fields.

<property name="backgroundColor" type="String" label="Background Color"/>

• objects

Restricts which Salesforce objects your component can be added to (only valid with

<objects>
    <object>Account</object>
    <object>Opportunity</object>
</objects>