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