Lightning Web Components Naming Convention

Thursday, 2 April 2020

Lightning Web Components Naming Convention

In this post we will talk about Lightning Web Components Naming Convention rules. We will also talk about example of PascalCase, camelCase or kebab-case and how those naming convention rules works in LWC.

Components Bundles

Lightning web component bundles include all below files by default. Its also have some Optional component like CSS, SVG Icon.

Lets see what is the naming convention :

Naming Convention / Rules for Components Bundles

Component name Must begin with a lowercase letter
Name must contain only alphanumeric or underscore characters

Can’t contain a hyphen (dash)

Must be unique in the namespace (No other Aura or LWC can have this name)
Can’t include whitespace
Can’t end with an underscore
Can’t contain two consecutive underscores
Folder and files names must have same “prefix name”.

HTML File

Use camel case to name your component and use kebab-case to reference a component in the markup. For example

JavaScript File

Java Script Class name should be in PascalCase like below example :

CSS File

Needs to be created in the component bundle
Has the same name as the component
Uses standard CSS syntax
Unlike Aura, no need for .THIS

What is the different between camelCase, PascalCase and kebab-case ?

camelCase : Each word in the middle of the respective phrase begins with a capital letter. for example apexHours.
PascalCase: It is same like Camel Case where first letter always is capitalized. for example ApexHours.
kebab-case: Respective phrase will be transferred to all lowercase with hyphen(-) separating words. for example apex-hours.

Case Name	camelCase	PascalCase	kebab-case
Example	helloWorld	HelloWorld	hello-world
Where to use	Folder File Names Property name in JS	Class in Java Script	Component reference in markup HTML attribure name