To define a component, create a folder that bundles your component’s files directly under the lwc folder. If you use Salesforce DX Tools, the folders are automatically created for you when you create a project. The Salesforce DX project structure looks like this.
1force-app
2 ├──main
3 ├──default
4 ├──aura
5 ├──...
6 ├──lwc
7 ├──myComponentA project includes a force-app/main/default folder that contains folders like aura and lwc. For more information, see Salesforce DX Project Structure and Source Format.
The folder and its files must have the same name, including capitalization and underscores. However, a utility file that exports JavaScript code can have a different name, for example, utils.js.
1myComponent
2 ├──myComponent.html
3 ├──myComponent.js
4 ├──myComponent.js-meta.xml
5 ├──myComponent.css
6 ├──myComponent.svg
7 ├──utils.js
8 └──__tests__
9 ├──data
10 └──myComponent.test.jsA component folder can include these files.
| File | Required? | Created automatically using Salesforce DX Tools? | Description |
|---|---|---|---|
| HTML |  | Provides a UI for the component. See Component HTML File. | |
| JavaScript | | | Defines the logic for a component. See Component JavaScript File. |
| Configuration | | | Defines the metadata values for the component. See Component Configuration File. |
| CSS | Provides styling for the component. See Component CSS File. | ||
| SVG | Enables a component to use a custom icon in Lightning App Builder and Experience Builder. See Component SVG Icon. | ||
| Utilities | Shares code between components. See Share JavaScript Code. | ||
| Test | | Provides Jest tests for a component. See Write Jest Tests for Lightning Web Components. |
The folder and its files must follow these naming rules.
Save each Lightning web component directly under the force-app/main/default/lwc root folder. You can't nest a component in another component folder.
Note
Lightning web components match web standards wherever possible. The HTML standard requires that custom element names contain a hyphen.
Since all Lightning web components have a namespace that’s separated from the folder name by a hyphen, component names meet the HTML standard. For example, the markup for the Lightning web component with the folder name widget in the default namespace c is <c-widget>.
However, the Salesforce platform doesn’t allow hyphens in the component folder or file names. What if a component’s name has more than one word, like “mycomponent”? You can’t name the folder and files my-component, but we do have a handy solution.
Use camel case to name your component myComponent. Camel case component folder names map to kebab-case in markup. In markup, to reference a component with the folder name myComponent, use <c-my-component>.
1<!-- parent.html -->
2<template>
3 <c-my-component></c-my-component>
4</template>You can use underscores in component folder names, but they don’t map to kebab case in markup. The names are legal because the namespace is separated with a hyphen, but most users expect hyphens instead of underscores in a web component name. For example, this component’s markup references the my_component component. It’s legal, it just looks a little odd.
1<!-- parent.html -->
2<template>
3 <c-my_component></c-my_component>
4</template>See Also
j