Naming Rules for Custom Elements

javascript
Published on February 1, 2021

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/>
    
Related Tutorials
How to Create a HTML Custom Element
Comments
Loading Comments