To create a component, first create a folder that bundles your component’s files.
The folder and its files must have the same name, including capitalization and underscores.
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)
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.