UNPKG

2.5 kBMarkdownView Raw
1Lightning 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.
2
3- Develop components quickly and declaratively using HTML, JavaScript, and CSS.
4- Develop accessible components so that everyone can understand and navigate your app.
5- Components are encapsulated in all browsers via the `@lwc/synthetic-shadow` package, which polyfills the Shadow DOM.
6
7Developing a Lightning web component is this easy.
8
9```ascii
10counter
11 ├──counter.css
12 ├──counter.html
13 └──counter.js
14```
15
16```html
17<!-- counter.html -->
18<template>
19 <p>Counter: {count}</p>
20 <button onclick="{increaseCounter}">Add</button>
21</template>
22```
23
24```css
25/* counter.css */
26p {
27 font-family: serif;
28 font-size: large;
29}
30```
31
32```javascript
33// counter.js
34import { LightningElement } from 'lwc';
35
36export default class Counter extends LightningElement {
37 count = 0;
38
39 increaseCounter() {
40 this.count += 1;
41 }
42}
43```
44
45## Supported Browsers
46
47| Browser | Version |
48| ----------------------------- | ------- |
49| Microsoft® Internet Explorer® | IE 11\* |
50| Microsoft® Edge | Latest |
51| Google Chrome™ | Latest |
52| Mozilla® Firefox® | Latest |
53| Apple® Safari® | 12.x+ |
54
55For 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](https://github.com/salesforce/eslint-plugin-lwc#compat-performance) linting rules.
56
57## Docs, Recipes, & Support
58
59[lwc.dev](https://lwc.dev) has all the information you need to develop components using LWC, including [code recipes](https://recipes.lwc.dev/) and code playgrounds.
60
61Get started fast using the [`create-lwc-app`](https://www.npmjs.com/package/create-lwc-app) tool.
62
63```bash
64npx create-lwc-app my-app
65cd my-app
66npm run watch
67```
68
69For support, use the `lwc` tag on [Stack Overflow](https://stackoverflow.com/questions/tagged/lwc) or the `lightning-web-components` tag on [Salesforce Stack Exchange](https://salesforce.stackexchange.com/questions/tagged/lightning-web-components).
70
71## Release Notes
72
73Changes are documented at [github.com/salesforce/lwc/releases](https://github.com/salesforce/lwc/releases).