lwc

To help you get started, we've collected the most common ways that lwc is being used within popular public projects.

salesforce / lwc / packages / integration-tests / scripts / build.js View on Github

const rollupReplacePlugin = require('rollup-plugin-replace');
const compatPolyfills = require('compat-polyfills');
const { getModulePath } = require('lwc');

// -- Build Config -------------------------------------------
const mode = process.env.MODE || 'compat';
const isCompat = /compat/.test(mode);
const isProd = /prod/.test(mode);

const engineModeFile = getModulePath(
    'engine',
    'iife',
    isCompat ? 'es5' : 'es2017',
    isProd ? 'prod' : 'dev'
);
const shadowModeFile = getModulePath(
    'synthetic-shadow',
    'iife',
    isCompat ? 'es5' : 'es2017',
    isProd ? 'prod' : 'dev'
);

const wireServicePath = getModulePath(
    'wire-service',
    'iife',
    isCompat ? 'es5' : 'es2017',
    isProd ? 'prod' : 'dev'
);
const todoPath = path.join(require.resolve('../src/shared/todo.js'));

const testSufix = '.test.js';
const testPrefix = 'test-';

View more ways to use lwc

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

<template>
    <p>Counter: {count}</p>
    <button>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.