Naming Rules for Custom Elements

Published on February 2, 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 -->
    <!-- invalid : starts with uppercase -->
    <!-- invalid : starts with an emoji -->
  • Name must contain a dash - character. This dash character helps the browser to distinguish custom elements from regular elements.

    <!-- valid -->
    <!-- invalid : no dash -->
  • While defining the custom element, the tag cannot be self closing.

    <!-- invalid : has no closing tag -->
In this Tutorial