Lightning Web Components (LWC) is an enterprise-grade web components foundation for building user interfaces. LWC provides a simple authoring format for UI Components. LWC compiles this authoring format into low-level Web Component APIs. The lwc
package is the main entry point for dependencies.
- Develop components quickly and declaratively using HTML, JavaScript, and CSS.
- Develop accessible components so that everyone can understand and navigate your app.
- Components are encapsulated in all browsers via the
@lwc/synthetic-shadow
package, which polyfills the Shadow DOM.
Developing a Lightning web component is this easy.
counter
├──counter.css
├──counter.html
└──counter.js
<!-- counter.html -->
<template>
<p>Counter: {count}</p>
<button onclick="{increaseCounter}">Add</button>
</template>
/* counter.css */
p {
font-family: serif;
font-size: large;
}
// counter.js
import { LightningElement } from 'lwc';
export default class Counter extends LightningElement {
count = 0;
increaseCounter() {
this.count += 1;
}
}
Supported Browsers
Browser | Version |
---|---|
Microsoft® Internet Explorer® | IE 11* |
Microsoft® Edge | Latest |
Google Chrome™ | Latest |
Mozilla® Firefox® | Latest |
Apple® Safari® | 12.x+ |
For IE 11, LWC uses compatibility mode. Code is transpiled down to ES5 and the required polyfills are added. To develop components that run in IE 11, follow the compatibility mode linting rules.
Docs, Recipes, & Support
lwc.dev has all the information you need to develop components using LWC, including code recipes and code playgrounds.
Get started fast using the create-lwc-app
tool.
npx create-lwc-app my-app
cd my-app
npm run watch
For support, use the lwc
tag on Stack Overflow or the lightning-web-components
tag on Salesforce Stack Exchange.
Release Notes
Changes are documented at github.com/salesforce/lwc/releases.