1 | 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.
|
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 |
|
7 | Developing a Lightning web component is this easy.
|
8 |
|
9 | ```ascii
|
10 | counter
|
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 */
|
26 | p {
|
27 | font-family: serif;
|
28 | font-size: large;
|
29 | }
|
30 | ```
|
31 |
|
32 | ```javascript
|
33 | // counter.js
|
34 | import { LightningElement } from 'lwc';
|
35 |
|
36 | export 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 |
|
55 | 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](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 |
|
61 | Get started fast using the [`create-lwc-app`](https://www.npmjs.com/package/create-lwc-app) tool.
|
62 |
|
63 | ```bash
|
64 | npx create-lwc-app my-app
|
65 | cd my-app
|
66 | npm run watch
|
67 | ```
|
68 |
|
69 | For 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 |
|
73 | Changes are documented at [github.com/salesforce/lwc/releases](https://github.com/salesforce/lwc/releases).
|