How To Use Salesforce Lightning Web Components

Salesforce CRM operates in two modes – Classic and Lightning. Salesforce Classic is the older version of Salesforce, while Lightning is the modern representation of Salesforce. As they say, out with the old and in with the new. But is this true in the case of Salesforce?

How To Use Salesforce Lightning Web Components
Table of contents

This article will explore the more recent version of Salesforce – Salesforce Lightning – and what it brings to the table for admins, developers, and business owners.

Salesforce Lightning Web Components

Salesforce Lightning uses a web-based framework called the Lightning Web Component (LWC). LWC is an integral part of Salesforce Lightning. Usually, the best way to accomplish a given requirement is to break it down into smaller and reusable components and then handle them simultaneously.

The Lightning Component in Salesforce works the same way. The complex features use reusable, small, modular Lightning Web Components.

But why did Salesforce resort to Lightning? What exactly are Salesforce Lightning and Lightning Web Components? Let’s find out in detail.

Salesforce Lightning Experience Overview

Salesforce Lightning Experience is an advanced and modern representation of Salesforce Classic. It is a component-based framework and hosts advanced JavaScript features to make Salesforce more fun and easier to use.

When mobile computing wasn't popular, Salesforce used Apex and Visualforce for almost everything. But the IT sector saw a massive shift in 2015 because of JavaScript. Every other app and website now requires a desktop and mobile-friendly design. 

However, Salesforce worked on Aura components way before the innovative JavaScript shift. But as JavaScript is ever-changing, reimplementing it with Aura components wasn’t easy.

Salesforce came to the rescue by coming up with LWCs. This web-based framework follows web component standards and the advantages JavaScript brings.

Before LWCs, the Salesforce mobile app could only be developed via "Salesforce1." But the Lightning Experience, along with Lightning Web Components, has made the component development framework of mobile-ready components more manageable.

Salesforce Lightning Features

Salesforce Lightning introduced numerous new features. Here are some of the major ones:

The Lightning Experience

It is a front-end graphical user interface that is much more impeccable than the Classic version.

Lightning App Builder

This feature provides endless out-of-the-box options for Salesforce app creation and customizations with mere drag-and-drop features.

Lightning Component Framework

This is all about developing reusable Web Components with the help of front-end technologies. Be it the developer side or the client side, the Lightning Framework is preferred by all.

Lightning Connect

Lightning Connect comes up with easier ways to integrate external tools with Salesforce. Lightning Connect handles data consumption and production from external sources and integration.

What Is A Lightning Web Component?

An LWC consists of standard web technologies, like HTML, CSS, JavaScript, and some Salesforce specialized services. The Salesforce specialized services are:

  • A customizable Lightning data device.
  • User interface API.
  • The base components that help deliver end-to-end platform-specific solutions and functionalities. The extension of these components is “.cmp.”

Typically, Salesforce developers create various LWCs, and the administrators deploy them to construct web applications according to business users and their needs. An LWC can be easily combined with other components, which makes it highly flexible and customizable.

Types Of Salesforce Lightning Components

There are three types of Lightning Components:

  • Standard Components: The Standard Lightning Components come with Salesforce. As these are pre-installed in your organization, you can’t remove them. However, it is up to you whether you choose to use or hide them.
  • Custom Components: As the name suggests, custom base Lightning Components are created by Salesforce developers based on different requirements and needs. These are highly advanced and flexible. Custom Lightning Components and Lightning Experience are often termed as Lightning Pages.
  • AppExchange Components: AppExchange is like a Salesforce store with numerous custom-built components and functionality. The AppExchange Web Components are pre-built and made available, ready to be installed and used.

What Are The Contents Of The LWC Framework?

A Lightning Component's structure and component architecture are similar to that of an Aura component. The main contents of an LWC are HTML, JavaScript, optional CSS, and an XML file that defines the metadata value of that component.

In short, LWCs are custom front-end components created for a business's UI and functionality. These front-end interfaces can be linked with an Apex class on the back-end. 

Hence, you can also refer to the custom elements of LWCs as full-fledged Salesforce solutions. There are numerous advantages of using Lightning Web Components. Some of them are:

  • Lightning UI Components. These components can be highly flexible, customizable, and shareable with other users.
  • The Lightning Data Services Framework supports major front-end technologies, like HTML5, CSS, JavaScript, etc. It enables the custom development of reusable and responsive Salesforce-based components. It also helps develop applications for desktop and mobile-based interfaces.
  • The Lightning record platform and framework uses JSON for data exchange.

Let us now understand the contents of each of these components.


The HTML file starts with the root tag “<template>,” which holds all your component’s HTML content and tags. Whenever this file is rendered, the “<template>” tag is changed to “<namespace-component-name>.”

The HTML file contains the structure of the component with which the user will interact.


The first line of every JavaScript file in an LWC is:

 Import { LightningElement } from ‘lwc’;

This import function imports the core Lightning module.

The JavaScript file handles all the back-end parts of a component, along with the linkage from Apex classes and Salesforce data.

Configuration (XML)

This file handles the metadata configuration of the component. For example, it takes on the responsibility of component labels, their availability for different Salesforce components and features, etc.


If you style your component or add some graphics, these files will help you. The stylesheets in LWC are applied automatically to the HTML file.

Prerequisites For Lightning Web Components

You can create Lightning Web Components either from the Developer Console or using a code editor, like VS Code. In this article, we will start with VS Code.

Before creating an LWC, there are a few things you need to keep in mind:

  • Your component name must begin with a lowercase letter.
  • It shouldn’t contain any whitespace.
  • It should only have alphanumeric or underscore characters.
  • It shouldn’t contain consecutive underscores.

Now that you’re aware of the naming convention, let’s start with creating one Lightning Component:

  • Open the “Command Palette” in your VS Code. Press “Ctrl+Shift+P” (Windows) or “Cmd+Shift+P” (MacOS).
  • Type and select “Create: SFDX Project.” Press “Enter.”
  • Give the project a name. Press “Enter” and create the project.
  • Once your project is completed, you need to authorize your organization.

To learn more about creating a new project and authorizing an organization, you can follow this step-by-step guide by Trailhead.

When you create a web component, it creates three files by default. However, you can include two more files. Say you create an LWC named “helloWorld.” This Lightning Web Component contains the following files by default:

  • helloWorld.html.
  • helloWorld.js.
  • helloWorld.js-meta.XML.

If you want to add styles and graphics, you can create two more files:

  • helloWorld.css (optional).
  • HelloWorld.svg (optional).

Creating Your First LWC

After setting up your developer experience organization and creating a project, follow these steps to make your first LWC:

  • Open the “Command Palette” in your VS Code. Press “Ctrl+Shift+P” (Windows) or “Cmd+Shift+P” (MacOS).
  • It’ll ask for your directory – just ignore that and press “Enter.”
  • Now type “helloWorldComponent” as the component name and press “Enter.”
  • You’ll now see your component under the LWC folder with three pre-built files: HTML, JavaScript, and XML.

Code Requirement Examples


<lightning-card title="HelloWorld" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hello, {greeting}!</p>
<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
  • As we’ve stated, the HTML in LWC resides within the “<template>” tag.
  • In the code, you’re creating a “<lightning-card>” that acts like a container.
  • The “<lightning-input>” takes input from the user, and the value is stored in “{greeting}.”
  • This value is dynamically used in the “<p>” tag that displays some text.
  • The “{changeHandler}” comes to action whenever the value of the “{greeting}” is changed. JavaScript handles this action.


import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
@track greeting = '';
changeHandler(event) {
this.greeting =;
  • The JavaScript file imports the Lightning module along with ‘track.’ The LWC hosts three decorators – track, wire, and API. Here, ‘track’ is used to track the changes in the property of an object or element.
  • This ‘track’ is used to observe the changes in the “{greeting}” based on user inputs.
  • Whenever the value of the “{greeting}” changes, the “changeHandler” event is called that sets the value of the “{greeting}.”


<?XML version="1.0" encoding="UTF-8"?>
<lightningcomponentbundle XMLns="" fqn="helloWorld">
  • Your Lightning Component won’t be available to use unless you set “<isExposed>” as true.
  • The “<targets>” tag is used to mark down the target areas within Salesforce where you want the LWC to be available for use
  • For example, the target “lightning__AppPage” points to application pages, and “lightning_RecordPage” states that this component is also used in record pages.
LWCs can also invoke Apex classes to perform more advanced server-side operations and create exceptional performance.


Once your LWC is created, all that’s left is to deploy and use it. Follow these steps to deploy your LWC from VS Code:

  • Go to the LWC folder in your project directory.
  • Look out for your component and right-click on it.
  • Click on “SFDX: Deploy Source to Org” when the panel opens up.
Your LWC will be deployed to your organization within a few seconds and will become available. You can also deploy the LWC or any changes by right-clicking within the file and following the same steps.

Now, you can use the Lightning Component on your homepage, application page, or record page. You can do so by following these steps:

  • Go to the page where you want to add the LWC.
  • Click on the gear icon on the top-right side of the screen. Select “Edit page.
  • A new edit panel for that page opens up. Now search for your component under the custom tab.
  • Now, drag and drop where you want to display it on the page.
  • Click “Save” and then “Activation.” Now, set it as “Org Default,” if applicable, and click “Activate.”

Should You Use LWC Or Aura?

LWCs perform better and are easier to develop than Aura Components. But there are cases when you need to use Aura along with Lightning Web Components. This performance is because LWCs are relatively new and don’t support all of Aura’s functionalities.

You can work with LWC and Aura for extra development by linking them with an interoperability layer.

This development allows you to write LWCs and connect them to applications containing Aura Components. Please note that Aura Components can host LWCs, but the other way around isn’t possible.

Here are some other points to consider:

Easy To Learn

Lightning Web Components (LWC) just use native web standards already built into browsers. It means that there is no additional abstraction layer like Aura or any other frameworks, you only need standard JavaScript to develop.

Faster Websites And Better Page Load Times

LWC is a light­weight framework, which is built on web standards, and because there is no additional abstraction layer, LWC may be rendered faster than Aura Components since speed is important for delivering pages quickly.


Because LWC aligns with web standards and is open source, the components you create can easily work outside the platform. This means that you can write a component on the platform and reuse it elsewhere.

Less Code

One difference between LWC and standard Web Components is the amount of code you have to write to create a component. To create a component with LWC, you just write a few lines of code, and then the LWC compiler will transform that code, adding the necessary boilerplate code so that those become Web Components.

The difference between LWC and Aura can’t be seen on-screen. But it makes a lot of difference for developers in the back-end. Hence, it is generally widely accepted that it is better to choose LWC over Aura.

You need to think about what will be best for your team, your production line, the reports and records you need to create, and how experienced your business is with code overall. 

Once you have answered these questions, you can make an informed decision.

Are You Ready To Create Your LWC?

It doesn’t matter if you are a developer who builds components or a business owner who needs the functionality to be built. It is smart to turn to the modern web standards of LWC versus the Classic version. Salesforce Lightning and the Lightning Component Framework have made Salesforce high-end and easy to use.

As LWC helps you develop flexible and easy Web Components with a friendly user experience, it has seen a sudden surge in future development implementation and demand.

Now is the best time to switch to LWC as a developer or a business.

As you can see, newer does seem to be better in this instance.