Naming Rules for Custom Elements

While creating a new custom element, there are some rules to be followed for the element's tag name :

Name has to start with a lowercase ASCII character. It cannot have an uppercase ASCII character anywhere.

UTF-8 characters, emojis etc are allowed (as long as they are not the starting character).

<!-- valid -->
<input-plus-minus></input-plus-minus>
<input-ðŸ¥ž></input-ðŸ¥ž>

<!-- invalid : starts with uppercase -->
<Input-plus-minus></Input-plus-minus>

<!-- invalid : starts with an emoji -->
<ðŸ¥ž-input></ðŸ¥ž-input>

Name must contain a dash - character. This dash character helps the browser to distinguish custom elements from regular elements.

<!-- valid -->
<input-plus-minus></input-plus-minus>

<!-- invalid : no dash -->
<inputplusminus></inputplusminus>
<input_plus_minus></input_plus_minus>

While defining the custom element, the tag cannot be self closing.
```

<inputplusminus/>
```