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.

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