Lightning Web 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.

Setting the environment

Install VS code Editor
https://code.visualstudio.com/

Salesforce extension pack
https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

Install CLI for Windows
https://developer.salesforce.com/tools/sfdxcli

Component Folder

• myTestComponent
• myTestComponent.html
• myTestComponent.js
• myTestComponent.js-meta.xml
• myTestComponent.css
• myTestComponent.svg

The folder and its files must follow these naming rules.

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores
• Can’t contain a hyphen (dash)

HTML File

• Every UI component must have an HTML file with the root tag <template>
• When a component renders, the <template> tag is replaced with the name of the component, <namespace-component-name>

Component JavaScript File

• Every component must have a JavaScript file. If the component renders UI, the JavaScript file defines the HTML element.
• The JavaScript file follows the naming convention <component>.js, such as myComponent.js. The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. For myComponent.js, the class name is MyComponent
• To import a class, function, or variable declared in a module, use the import statement. To allow other code to use a class, function, or variable declared in a module, use the export statement.
• The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module.

    import { LightningElement } from 'lwc’;

    export default class MyComponent extends LightningElement {

    }

Component Configuration File

• Every component must have a configuration file. The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Experience Builder.
• The configuration file follows the naming convention <component>.js-meta.xml, such as myComponent.js-meta.xml.
• Include the configuration file in your component’s project folder, and push it to your org along with the other component files.

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>45.0</apiVersion>

    <isExposed>false</isExposed>

    <targets>

         <target>lightning__AppPage</target>

         <target>lightning__RecordPage</target>

         <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Component CSS File

• A component can include a CSS file. Use standard CSS syntax to style Lightning web components.
• To style a component, create a style sheet in the component bundle with the same name as the component. If the component is called myComponent, the style sheet is myComponent.css. The style sheet is applied automatically.

Component SVG Icon

• A component can include an SVG resource to use as a custom icon in Lightning App Builder and Experience Builder.
• To include an SVG resource as a custom icon for your component, add it to your component’s folder. It must be named <component>.svg. If the component is called myComponent, the svg is myComponent.svg. You can only have one SVG per folder.