So far, we have been building lightning components using aura components. There is another new way or approach to build lightning components and we will see a very basic “Hello World” example today. I will post more articles on complex LWC in subsequent weeks
Lightning Web Components uses core web components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. You can create a lwc in VS Code project
Essentially, there are 3 main elements to create a simple lwc
- HTML provides the structure of component.
- JavaScript (JS) defines the core business logic and event handling.
- CSS gives look and feel, and animation for the component.
HTML
The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.
<template>
<input value={message}></input>
</template>
JavaScript
import { LightningElement } from ‘lwc’;
export default class App extends LightningElement {
message = ‘Hello World, from LWC’;
}
CSS
input {
color: red;
}