
First Lightning Web Component
The folder and its files must have the same name, including capitalization and underscores.
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)
myComponent
├──myComponent.html
├──myComponent.js
├──myComponent.js-meta.xml
├──myComponent.css
└──myComponent.svg
I have created my lightning web component : firstLWC
firstLWC.html
<template>
<lightning-card title="My First Lightning Web Component" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hi, {param}!</p>
<lightning-input label="Name" value={param} onchange={changeHandler}></lightning-input>
</div>
</lightning-card>
</template>
firstLWC.js
import { LightningElement } from 'lwc';
export default class FirstLWC extends LightningElement {
param = 'This is my first Lightning Web Component';
changeHandler(event) {
this.param = event.target.value;
}
}
firstLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="firstLWC">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Opportunity</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
isExposed:-
If isExposed is false, the component isn’t exposed to Lightning App Builder or Experience Builder.
To allow the component to be used in Lightning App Builder or Experience Builder, set isExposed to true and define at least one , which is a type of Lightning page.
targets:-
Specifies where the component can be added, such as on a type of Lightning Page or in Embedded Service Chat. If you want your component to appear in the Lightning App Builder or in Experience Builder, specify at least one Lightning page type.
targetConfigs :-
This sample configuration file makes the component available for all Lightning page types, but restricts support on record pages only for opportunity objects.