Lightning Web Components DEV

Introducing Lightning Web Components

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C).

Get Started Coding

The fastest way to code your first Lightning web component is in the third-party component IDE at webcomponents.dev.

Let’s create a Hello World Lightning web component and add it to the LWC starter-kit.

1. In a browser, go to webcomponents.dev/create/lwc.
2. Click the + sign that appears next to the src folder to create a file, and name it helloWorld.html. Copy this code into the code editor.

   <!-- helloWorld.html -->
   <template>
       Hello, {firstName}!
   </template>

3. Create a file and name it helloWorld.js. Copy this code into the code editor.

   // helloWorld.js
   import { LightningElement } from "lwc";
   
   export default class HelloWorld extends LightningElement {
     firstName = "World";
   }
   

4. To view your component, add it to the app.html file on line 5, right before <!-- Using an if statement -->.

   <div class="slds-p-top_large">
       <c-hello-world class="slds-text-heading_medium"></c-hello-world>
   </div>

   A camel case component name (helloWorld) maps to kebab case in HTML (hello-world). The default namespace is c, so the full component HTML tag is <c-hello-world>. Also note that components must use closing tags. To reference your own components, always code with the default namespace, c. Use c regardless of where the code is running: in an org with or without a namespace, in a managed or unmanaged package.
5. To save all your changes, click the Save icon at the top right of the code editor. The Stories panel refreshes to display the Hello, World! text.
6. Let’s go one step further and add a public property to the c-hello-world component. In helloWorld.js, import api, and use it to decorate the firstName field.

   // helloWorld.js
   import { LightningElement, api } from "lwc";
   
   export default class HelloWorld extends LightningElement {
       @api firstName = "World";
   }

7. Because c-hello-world exposes a public property, a component that consumes c-hello-world can set the property. In our example, the app component sets the property firstName.

   In app.html, add a first-name attribute to the <c-hello-world> tag. The camel case JavaScript property firstName maps to kebab case first-name in HTML.

   <!-- app.html -->
   <div class="slds-p-top_large">
     <c-hello-world first-name="Lightning"></c-hello-world>
   </div>

8. Now your component is reusable. For example, you can add multiple c-hello-world components to app.html and set each to a different value.

   <!-- app.html -->
   <div class="slds-p-top_large">
       <c-hello-world class="slds-text-heading_medium" first-name="Web"></c-hello-world>
   </div>
   <div class="slds-p-top_large">
       <c-hello-world class="slds-text-heading_medium" first-name="Components"></c-hello-world>
   </div>

To keep coding, jump to Data Binding in a Template. Have fun!

Other Live Code Environments

You can also play with code in these environments.

• Base component examples at webcomponents.dev
• Base component examples in the Component Reference
• lwc.dev playground

See Also

• Hello World in a Scratch Org

Previous

Documentation Changelog

Next

Lightning Web Components: Open Source