Lightning Web Component in Salesforce

A Lightning Web Component in Salesforce is a framework to build custom components, using HTML and modern Javascript, to run efficiently and save resources in our apps.

Types of Lightning Web Component in Salesforce

UI Component: Custom components that users can interact with via interfaces, buttons, forms, etc.
Service Component (Library): Serves a helper library, however, is created to have variables or functions that can be shared between components.

Contents for Lightning Web Component in Salesforce

HTML File

Every UI Component must have an HTML file.
The root tag should be <template>.
Convention name is <component>.html, for example, mainComponent.html.
When a component renders, the <template> tag is replaced with the name of the component with “c” at the begining, as default namespace.

<!-- Code -->
<template>
  <h1>Hello World</h1>
</template>

<!-- Rendered -->
<c-main-component>
  <h1>Hello World</h1>
</c-main-component>

Javascript File

A Javascript file is required in any type of Lightning Web Component.
Follows the naming convention <component>.js, for example, mainComponent.js
The class name must be written in Camel Case such as: class MainComponent.
We can import a class, function or variable declared in a module using the import keyword.
Javascript files in Lightning web components are ES6 or ES2015 (ECMAScript) modules.
Every component that has UI must have the code below:

import {LightningElement} from 'lwc';
class MainComponent extends LightningElement { 
  //code here 
}

export default MainComponent;

A custom component should extends the class LightningElement as the code above.
The export default keywords allows to use this class by other components.
A javascript file can contain: Private properties, event handlers and Public API (via public properties and methods using @api)
Fields defined in a Lightning web component class are reactive. Meaning, if the value of a field changed in the controller, the component automatically rerenders.
Use the decorator @track to detect any changes made to its properties or elements in an object or array.

Configuration File

Configuration file is required for every component.
Defines the metadata for the component. Also, includes the design configuration.
Naming as <component>.js-meta.xsml. For example, mainComponent.js-meta.xml.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metada">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
  </targets>
</LightningComponentBundle>

CSS File

Name convention as <component>.css. For example, mainComponent.css.
Uses standard CSS.
Does not override other styles on other parts of a page, only scoped to the component.
Only once CSS per Lightning web component.
Custom Aura tokens are created to style Aura components and can be used as variables for css. (See the code example)

<!--- MyAuraTokens.tokens -->
<aura:tokens>
  <aura:token name="myBaseFontNames" value="Helvetica, Arial" />
  <aura:token name="myBaseFontColor" value="#222222" />
</aura:tokens>

/* myLightningWebComponent.css */
.bodyClass {
  font-family: var(--c-myBaseFontNames);
  color: var(--c-myBaseFontColor);
}

Can create a Lightning Web Component that contains only a CSS and configuration file and, then imported by another Lightning Web Component that needs it.
To import a CSS Module, use @import statement. For example: @import “c/mainComponent”

SVG Icon

A custom icon can be defined for the custom component including an SVG file.
It’s naming convention is <component>.svg such as mainComponent.svg.
Only one SVG file is allowed per Lightning web component.
The SVG file is added to the top-level component folder.
SVG icon is visible in Lightning App Builder and Experience Builder.

Tests for Lightning Web Component in Salesforce

Component tests for Lightning Web Component are run using Jest.
Jest is a third-party testing framework used to test Javascript code.
Create a folder __tests__ on the component folder to contain all the test files.
The convention name recommended is <component>.test.js such as testMainComponent.test.js
Jest tests are created locally and run independently of Salesforce.

Access to Resources from Lightning Web Component in Salesforce

Static Resources can be imported using @salesforce/resourceUrl.
Content Asset Files can be imported using @salesforce/contentAssetUrl.
Custom Labels used for implementing multilingual features can be imported using @salesforce/label.
In addition, can import Internationalization Properties using @salesforce/i18n scoped module.
User Information can be imported using @salesforce/user.
Form Factor of the device is accessed by importing @salesforce/client/formFactor.

//Using a static resource in lwc

import { LightningElement }
import staticGVallejos from "@salesforce/resourceUrl/gvallejosLWC";

class MainComponent extends LightningElement {
  imgGVallejos = staticGVallejos + "/gvallejosLWC/images/gVallejos.png";
}

Checking User Permissions in Lightning Web Component in Salesforce

The scoped modules @salesforce/userPermissions and @salesforce/CustomPermission are used to check permissions in Lightning Web Component.
To check a user permission:

import canCustomizeReports from '@salesforce/userPermission/CreateCustomizeReports';

To check custom permissions:

//component.js
import { LightningElement } from 'lwc';
import hasViewGoogleSlides from '@salesforce/customPermission/ViewGoogleSlides';

export default class App extends LightningElement {
  get isViewButtonVisible () {
    return hasViewGoogleSlides;
  }
  openGoogleSlides(e) { ... }
}

<!-- component.html -->
<template>
  <template if:true={isViewButtonVisible}>
    <lightning-button label="View Content" onclick={openGoogleSlides}></lightning-button>
  </template>
</template>

Considerations When Using Lightning Web Component Model

A Lightning Web Component cannot contain an Aura Component.
In addition, the methods loadScript and loadStyle available through the platformResourceLoader module is used to load Javascript and CSS files respectively.
Finally, unlike Aura Components, Javascript and CSS files referencing takes place in the controller instead of the template.