Component Anatomy: HTML, JS, Meta

Component anatomy: HTML, JS, meta

Every Lightning Web Component is a folder containing three files that share the component's name. If your component is helloWorld, the folder holds helloWorld.html (the template), helloWorld.js (the JavaScript class), and helloWorld.js-meta.xml (the configuration). Understanding what each does — and how they connect — is the foundation for everything else.

// helloWorld.js
import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';

    handleChange(event) {
        this.greeting = event.target.value;
    }
}

The JavaScript file defines a class that extends LightningElement, the base class every component inherits from. Public class fields become the component's state and are automatically reactive for primitives. Methods handle events and logic. The class is the default export, and its name is conventionally the PascalCase version of the folder name.

<!-- helloWorld.html -->
<template>
    <lightning-input label="Name" value={greeting}
                     onchange={handleChange}></lightning-input>
    <p>Hello, {greeting}!</p>
</template>

The HTML file is always wrapped in a single root <template> tag. Inside, curly braces bind to properties and getters on the class ({greeting}), and on-prefixed attributes wire DOM events to handler methods (onchange={handleChange}). You compose base components like lightning-input from the Salesforce component library rather than reinventing form controls.

The meta XML file configures where the component can be used. It sets the API version, whether the component is exposed (isExposed), and which targets it supports — App Page, Record Page, Home Page, Flow, and more — along with any design properties admins can set. Without exposing it and declaring targets, the component won't appear in the Lightning App Builder. With these three files understood, we can dig into how state changes drive the UI, which is reactivity — the next lesson.