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.
A project includes a
force-app/main/default folder that contains folders like
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.
A component folder can include these files.
|Created automatically using Salesforce DX Tools?
|Provides a UI for the component. See Component HTML File.
|Defines the metadata values for the component. See Component Configuration File.
|Provides styling for the component. See Component CSS File.
|Enables a component to use a custom icon in Lightning App Builder and Experience Builder. See Component SVG Icon.
|Provides Jest tests for a component. See Write Jest Tests for Lightning Web Components.
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)
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.
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
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
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.