Component Folder
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 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>.
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.
See Also