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.

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   ├──myComponent.css
   └──myComponent.svg

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>.

<-- parent.html -->
<template>
    <c-my-component></c-my-component>
</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.

<!-- parent.html -->
<template>
    <c-my_component></c-my_component>
</template>

See Also

• Component Namespaces