Lightning Web Components

An Introduction to Lightning Web Components | Salesforce Lightning

Lightning web components are custom HTML components fabricated using HTML and standard JavaScript. Lightning web components and Aura components can exist together and interoperate on a page.  For administrators  & users, both of them show up as Lightning components.

Lightning Web Components is open source, engaging you to examine the source code, modify the behavior for your requirements, and gather enterprise-ready web components on any platform, not just Salesforce

Previously, we needed to use different frameworks to manufacture different sides of an application that encouraged external Salesforce. For example, we used the Aura component to develop the employee-defying side of an application on Salesforce. And also we used React, Angular, or Vue to build the customer-defying side of the application, and passed it on Heroku or on another platform. Today, we can use Lightning web components to fabricate both sides of the application. The advantages are huge. You would now be able to learn one framework instead of a couple.

We can simply create lightning web components using HTML, javascript, and CSS

These are the Fundamentals Pieces of your Component

  • HTML gives the structure to your component.
  • JavaScript describes the center's business logic and handles events.
  • CSS gives the look, feel, and animation to your component.

dont miss out iconDon't forget to check out: How to Convert sforce.apex.execute to Lightning | Salesforce Developer Guide

Let’s take a simple example of the Lightning web component:


    <input value={message}></input>


import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    message = 'Hello World';


input {
    color: red;

Decorators in Lightning Web Component

LWC has three decorators that append functionality to property or function. The capability to create decorators is part of ECMAScript and these three decorators are unique to LWC.

  • @api: It is used to expose public property. And the public property is reactive & if you want to change the reactive property value, the component is rerendered. So you know that when a component is rerendered, all the expressions used in the template are reconsidered once again. @api passes the public property values from the parent component.
    If you want to use @api decorators, you have to import it explicitly from lwc.
    Import { LightningElement, api } from ‘lwc’;
  • @track: If you want to track private reactive property value  & also rerender a component when it changes, decorate it with @track. We can use the private property only in the component where it is defined.
    If you want to use @api decorators, you have to import it explicitly from lwc.
    Import { LightningElement, track } from ‘lwc’;
  • @wire: It is used to read the Salesforce data. LWC uses a reactive wire service. @wire is used to call apex method in lwc js controller.
    If you want to use @api decorators, you have to import it explicitly from lwc.
    Import { LightningElement, wire } from ‘lwc’;

dont miss out iconCheck out another amazing blog by Shweta here: Stages of Salesforce CPQ Implementation

And also you have to import wire Syntax as shown below:

Import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

  1. apexMethodName: It recognizes the apex method.
  2. apexMethodReference: Imported Apex method name.
  3. Classname: Apex class name.
  4. Namespace: You know that the default namespace of the Salesforce org is ‘c’, in this case, don’t specify a namespace. The namespace is used when your apex class is in a managed package.

Important point: For property, we can have only one decorator at a time.


Popular Salesforce Blogs