LWC
LWC is the shorthand name for Lightning Web Component, the modern Web Components-based UI framework Salesforce uses for custom Lightning Platform development.
Definition
LWC is the shorthand name for Lightning Web Component, the modern Web Components-based UI framework Salesforce uses for custom Lightning Platform development. The acronym appears throughout developer documentation, Trailhead modules, GitHub repositories, and conversation as the everyday name for the framework. When Salesforce developers say "I built it in LWC" or "the LWC framework supports X", they mean the Lightning Web Component framework released in 2019 as the replacement for Aura.
LWC is built on web standards: Web Components, ES Modules, Shadow DOM, custom elements, and standard HTML templates. The framework adds Salesforce-specific decorators (api, wire, track), a security sandbox (Locker Service or Lightning Web Security), and data services (Lightning Data Service for record CRUD, Wire Service for reactive Apex calls). The result is a developer experience closer to React or Vue than to the older Aura framework, with components that can run anywhere Salesforce surfaces Lightning UI: record pages, Experience Cloud sites, Flow screens, the Salesforce Mobile App, and embedded surfaces.
LWC as the everyday name for Lightning Web Components
LWC as an acronym in everyday usage
LWC is used interchangeably with "Lightning Web Component" in developer documentation and conversation. The acronym appears in the file extensions (lwc folder in DX projects), the CLI commands (sf lightning generate component --type lwc), and the Trailhead module names (Lightning Web Components Basics). Most developers say LWC over the full name; the abbreviation is the everyday term. The full name "Lightning Web Component Framework" is used in formal documentation and marketing material.
The four-file component bundle
Every LWC is a bundle of files in a folder. componentName.html is the template. componentName.js is the JavaScript class. componentName.css is scoped styles. componentName.js-meta.xml is the metadata Salesforce uses to surface the component in App Builder. The bundle is intentionally compact: fewer files than Aura, easier to navigate. Salesforce DX scaffolds the bundle through sf lightning generate component. The CLI commands and folder structure are part of the standard developer workflow.
Decorators: @api, @wire, @track
Three primary decorators shape LWC code. @api marks a property or method as public, settable from a parent component. @wire connects a property or method to a reactive data service like Apex methods or record loads. @track was needed in older API versions for nested object reactivity; modern versions only need it for arrays and objects whose mutations should trigger re-renders. The decorators are TypeScript-style annotations on JavaScript class members. Most modern LWC code uses @api for inputs, @wire for data, and avoids @track unless specifically needed.
Where LWCs can run
LWCs can be placed on Lightning Experience record pages, app pages, home pages, Experience Cloud sites, Flow screens, Quick Action modals, Utility Bar widgets, and the Salesforce Mobile App. The lightning__ targets in the meta XML declare which contexts the component supports. Some contexts require additional configuration: a Flow screen LWC needs @api properties for the Flow variables, a Quick Action LWC needs to import the closeQuickAction adapter to dismiss the modal. The same component can run in multiple contexts if the metadata declares them.
Talking to Apex: wire vs imperative
LWCs call server-side Apex through two patterns. Wire adapters bind an Apex method to a property and re-run it automatically when the inputs change. Imperative calls are async functions that return a Promise; the component calls them inline and handles the result with await or .then. Wire is the default for read operations: it integrates with Lightning Data Service caching, re-runs on input changes, and follows reactive principles. Imperative is the default for writes (insert, update, delete) because mutations cannot be cached.
Shadow DOM and style scoping
Every LWC renders inside a Shadow DOM by default. CSS in the componentName.css file is scoped to the component, blocked from leaking out. CSS from the host page is blocked from leaking in. Slots let parent components pass child markup into named regions, similar to React children. The scoping is rigorous, which matters for AppExchange components dropped into customer orgs: the third-party component cannot accidentally style the rest of the customer's page. Salesforce ships synthetic shadow as a compatibility layer; native shadow is the modern default for new components.
LWC and Aura interoperability
LWCs and Aura components can coexist on the same Lightning page. An Aura component can embed an LWC inside its markup using the c:lwcComponentName tag. LWCs cannot embed Aura components, so the data flow is one direction. Events flow cleanly across the boundary: an LWC fires a CustomEvent, the parent Aura handles it as an Aura event. This is how most orgs running mixed-framework Lightning pages work: existing Aura inventory hosts new LWC additions without rewrite.
Building an LWC for the Lightning Platform
Building an LWC is the same workflow as Lightning Web Component development: scaffold the bundle through DX, write the four files, deploy through the CLI, surface in App Builder.
- Install the Salesforce CLI
Install the sf CLI from developer.salesforce.com. Confirm with sf --version. The CLI is the entry point for all DX-driven LWC development.
- Scaffold a DX project
Run sf project generate --name MyProject. The CLI creates the DX folder structure with force-app/main/default/lwc as the LWC home.
- Generate the LWC bundle
Run sf lightning generate component --type lwc --name myComponent. The CLI creates the four-file bundle in the lwc folder.
- Write the HTML, JS, CSS
Edit myComponent.html for the template, myComponent.js for the class, myComponent.css for scoped styles. Configure myComponent.js-meta.xml to expose the component.
- Deploy to the target org
Run sf project deploy start --source-dir force-app/main/default/lwc/myComponent. The CLI compiles and deploys.
- Drop the component on a Lightning page
Setup, Lightning App Builder, edit a record page, drag the component from the Custom palette, save, activate.
- Verify in the browser
Open a record using the page, confirm the component renders with the right state, test interactions and reactivity.
Four-file folder structure: HTML template, JS class, meta XML, CSS styles. The unit of LWC development.
Public property or method, settable from parent components or callable from outside.
Reactive data binding to Apex methods, record loads, or other wire-capable services.
The contexts where the LWC can run: record page, app page, Experience Cloud, Flow screen, Quick Action.
The framework-level cache for record CRUD operations used by wire adapters and imperative calls.
Component CSS isolation that prevents style leakage across component boundaries.
- @api properties are public. Renaming an @api property is a breaking change for every parent that consumes it. Treat @api as a contract.
- Wire adapters do not call .catch like a Promise. Errors arrive as the error property of the wire result. Forgetting this leads to silently swallowed exceptions.
- Native shadow blocks global CSS, including SLDS overrides. If design system tokens are not appearing, check whether the component is running native shadow.
- LWCs cannot embed Aura components. Aura can embed LWC. Plan the component hierarchy with the one-way embed in mind.
- The meta XML isExposed and target settings determine where the LWC can be placed. Missing or wrong settings hide the component from App Builder silently.
Trust & references
Straight from the source - Salesforce's reference material on LWC.
- LWC Open SourceSalesforce Open Source
Hands-on resources to go deeper on LWC.
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is LWC?
Q2. How does LWC differ from Aura?
Q3. Where can LWC components run?
Discussion
Loading discussion…