Lightning Web Components represents a fresh approach to constructing Lightning components, employing the latest advancements in web standards over the past five years. It seamlessly integrates with the original Aura programming model, ensuring compatibility and collaboration. Additionally, Lightning Web Components excels in performance by adhering to core Web Components standards and focusing on essential features for optimal functioning in Salesforce-supported browsers. Its foundation in native browser code results in a lightweight structure, offering outstanding performance. The majority of the code is composed of standard JavaScript and HTML, contributing to its efficiency.
Creating Lightning web components is a straightforward process involving just three steps. First, you generate a JavaScript file, followed by an HTML file, and optionally, a CSS file. The HTML file establishes the structure of your component, while the JavaScript file defines the core business logic and handles events. If desired, the CSS file can be used to customize the component’s appearance, including its look, feel, and animations. As an example, consider a basic Lightning web component provided below, which showcases a simple input field displaying the text “Hello World.”
HTML
<template>
<input value={message}></input>
</template>
The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.
JavaScript
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
message = 'Hello World';
}
CSS
input {
color: blue;
}