An LWC bundle is a collection of files that together define a single Lightning Web Component. Typical files include an HTML template, a JavaScript controller, a metadata XML file, and optional assets (CSS, SVGs, tests).
Every LWC must include an HTML file with a root <template> tag. This tag contains the component's markup and bindings.
<template> <h1>Hello, World!</h1> <p>Welcome to my Salesforce application.</p> </template>
The JavaScript file defines component behavior: properties, event handlers, getters, and lifecycle hooks.
import { LightningElement } from 'lwc';
export default class GreetingComponent extends LightningElement {
name = '';
handleInputChange(event) {
this.name = event.target.value;
}
get greeting() {
return this.name ? `Hello, ${this.name}!` : 'Hello, World!';
}
}
The .js-meta.xml file specifies component metadata such as API version, exposure (isExposed), masterLabel, description, and targets (where the component can be used: App Page, Record Page, Home Page, etc.). Use this file to control how and where your component is exposed.
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>64.0</apiVersion> <isExposed>true</isExposed> <masterLabel>greetingComponent</masterLabel> <description>A simple greeting component</description> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
A CSS file is optional and must be created manually to add component-specific styles. Styles are scoped to the component by default.
p {
color: green;
font-size: 20px;
border: 1px solid red;
}
Add SVGs for custom icons, additional JS utility files for shared logic, and the __tests__ folder to hold Jest tests for your components.
