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”.


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

Please check below post on Lightning Web Components:-

Amit Chaudhary

No comments:

Post a Comment