In this blog post, I am going to cover a very basic thing which you would do as the first thing while creating a Lightning Web Component. Yes, you’re right – We are going to discuss the Component folder structure today which seems a basic thing but it bundles all the salient files required for a component.

Let’s have a look at the following folder structure and files which are bundled in this.

While looking at the folder and its files you would have understood that they must have the same name as the lwc name. Their extension is different based on the use of the file.

Naming rules which you should always keep in mind while working on lwc

• It should always start with a lower case letter
  Correct Name Ex. – sampleComponent, myFirstComponent, dataGridComponent, firstLWC
  Incorrect Name Ex. – SampleComponent, MyFirstComponent
• Shouldn’t include any whitespace. [“my firstComp” isn’t a valid name]
• Doesn’t allow any special characters except underscore. [“my-firstComponent” is invalid since it contains hyphen]
• Can not end with underscore and can not contain more than 1 consecutive underscores in the name

Lightning web components uses the HTML standards and which requires that custom element should contain a hyphen. Any component built by you adheres to those standards which enforce a namespace has to be added before every lwc component and additionally it uses kebab-case in markup.

In kebab case, all letters are written in lower case and the words are separated by a hyphen or minus sign. The kebab notation is often used as a convention for naming filenames. This notation is also called a hyphen case. 

Input: thisIsASampleComponentCode

Output: this-is-a-sample-component-code

Component HTML File

A component can be divided into 2 categories based on its uses.
– UI Component : A component which must have a HTML file with the root tag <template>
– Service Component – Doesn’t require an HTML file. It is used for JS code share across the components

When you create a UI component, your HTML file should always end with <component>.html naming convention. This file contains all the HTML content within the root <template> tag and when a component renders, the template tag is replaced with the component’s name. Let’s take an example

<!-- mySampleComponent -->
<template>
    <h1> My Sample Component </h1>
</template>
// When it gets rendered it will be converted in the following markup
<c-my-sample-component>
    <h1> My Sample Component </h1>
</c-my-sample-component>

While using custom component (elements) in the HTML, you can’t make them self-closing tags. As per HTML standard, it has to be closed explicitly with a closing tag.

I hope this blog will give you a little bit understanding of lwc folder structure. We will cover the JS and other files in the next blog. Stay tune and stay safe.

Reference

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_introduction