LWC anatomy

Lightning Web Components (LWC) is Salesforce's modern UI framework, built on web standards — custom elements, shadow DOM, and modern JavaScript modules — with a thin Salesforce layer on top. Because it embraces the platform of the browser rather than a proprietary abstraction, the skills transfer, and it is markedly faster than the older Aura framework it succeeds.

A component is a bundle of files that share a name and live in one folder under lwc/. The three core files are the HTML template, the JavaScript class, and the metadata configuration XML that declares where the component can be used.

// greeting.js — the component's JavaScript class
import { LightningElement, api } from 'lwc';

export default class Greeting extends LightningElement {
    @api name = 'World';           // public, settable by a parent or App Builder

    get message() {                // a getter used by the template
        return `Hello, ${this.name}!`;
    }
}

<!-- greeting.html — the template -->
<template>
    <p>{message}</p>
</template>

<!-- greeting.js-meta.xml — where it can be used -->
<LightningComponentBundle>
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets><target>lightning__RecordPage</target></targets>
</LightningComponentBundle>

The HTML file must have a single root <template> tag, and it can reference properties and getters from the class using curly braces. The JavaScript class extends LightningElement and is the component's behaviour and state. The -meta.xml file with isExposed and targets controls whether the component appears in the Lightning App Builder and on which page types.

The @api decorator marks a property as public, so a parent component or an admin in App Builder can set it. Everything else is private to the component. This encapsulation — public API in, private state within — is the foundation of composing larger UIs from small components.

As an exercise, create this greeting component, deploy it, and drop it onto a record page in the Lightning App Builder, setting the name property. Seeing your own component render in a real org makes the model concrete. Next we look at how components stay reactive and how they communicate through events.