Naming Rules For Creating Custom Elements

When you are creating the custom elements, there are a few rules to be followed for the tag name of the element.

Below are the rules For Custom element naming

1)   The first character of the name has to be a lowercase ASCII character.

<!-- valid -->
<input-add></input-add>

<!-- invalid : starts with uppercase -->
<Input-add></Input-add>

2)  Name cannot have uppercase ASCII characters anywhere.

<!-- valid -->
<input-add></input-add>

<!-- invalid : starts with uppercase -->
<Input-add></Input-add>

3)  Emojis, UTF-8 characters, etc are allowed (but they cannot be a starting character)

<!-- valid -->
<input-åðð></input-åðð>

<!-- invalid : starts with an emoji -->
<åðð-input></åðð-input>

4)  There should be a dash – character in the name. This character helps the browser identify custom elements from the regular elements.

<!-- valid -->
<input-add></input-add>

<!-- invalid : no dash -->
<inputadd></inputadd>
<input_add></input_add>

5)  Custom elements cannot be a self ended tag.

<!-- invalid : has no closing tag -->
<inputadd/>

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories