Lightning Web Components (LWC) is an enterprise-grade web components foundation for building user interfaces. LWC provides a simple authoring format for UI components, which is compiled 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 Shadow DOM, with the @lwc/synthetic-shadow package as an optional polyfill for older browsers.

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

LWC supports all browsers supported in Salesforce Lightning Experience.

As of LWC v3.0.0, Microsoft® Internet Explorer® 11 is no longer supported.

Docs, Recipes, & Support

lwc.dev has all the information you need to develop components using LWC, including code recipes and code playgrounds.

For support, use the lwc tag on Stack Overflow or the lightning-web-components tag on Salesforce Stack Exchange.

When filing a bug, it's useful to use playground.lwc.dev to create a live reproduction of the issue.

Release Notes

Changes are documented at github.com/salesforce/lwc/releases.

The lwc package

This package (lwc) is a convenience package that re-exports all packages that might be used for LWC component development. Installing it also installs the core @lwc/* packages.

For example, to use @lwc/engine-server from this package, you can do:

import { renderComponent } from 'lwc/engine-server';

This is equivalent to:

import { renderComponent } from '@lwc/engine-server';

Experimental Packages

The @lwc/ssr-compiler and @lwc/ssr-runtime packages are still considered experimental, and may break without notice.

Experimental APIs

setTrustedSignalSet()

This experimental API enables the addition of a signal as a trusted signal. If the ENABLE_EXPERIMENTAL_SIGNALS feature is enabled, any signal value change will trigger a re-render.

If setTrustedSignalSet is called more than once, it will throw an error. If it is never called, then no trusted signal validation will be performed. The same setTrustedSignalSet API must be called on both @lwc/engine-dom and @lwc/signals.

isTrustedSignal()

Not intended for external use. This experimental API enables the caller to determine if an object is a trusted signal. The ENABLE_EXPERIMENTAL_SIGNALS feature must be enabled.

setContextKeys

Not intended for external use. Enables another library to establish contextful relationships via the LWC component tree. The connectContext and disconnectContext symbols that are provided are later used to identify methods that facilitate the establishment and dissolution of these contextful relationships. The ENABLE_EXPERIMENTAL_SIGNALS feature must be enabled.

setTrustedContextSet()

Not intended for external use. This experimental API enables the addition of context as trusted context. The ENABLE_EXPERIMENTAL_SIGNALS feature must be enabled.

If setTrustedContextSet is called more than once, it will throw an error. If it is never called, then context will not be connected.

ContextBinding

The context object's connectContext and disconnectContext methods are called with this object when contextful components are connected and disconnected. The ContextBinding exposes provideContext and consumeContext, enabling the provision/consumption of a contextful Signal of a specified variety for the associated component. The ENABLE_EXPERIMENTAL_SIGNALS feature must be enabled.

SignalBaseClass

Not intended for external use. Signals that extend SignalBaseClass will be added to set of trusted signals. The ENABLE_EXPERIMENTAL_SIGNALS feature must be enabled.