Search code examples
javascripthtmlweb-component

Web components (JavaScript native) naming limitations?

I know that Web components naming has below limitations:

  • Capital alphabet symbols is not allowed.
  • Must include at least one n-dash.

Any others? What about underscore, digits and other symbols?

Solution

  • Here's the full specification from the HTML spec:

    A valid custom element name is a sequence of characters name that meets all of the following requirements:

    name must match the PotentialCustomElementName production:

    PotentialCustomElementName ::=
   [a-z] (PCENChar)* '-' (PCENChar)*
PCENChar ::=
   "-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | 
   [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | 
   [#x203F-#x2040] | [#x2070-#x218F] | [#x2C00-#x2FEF] |
   [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | 
   [#x10000-#xEFFFF]

    This uses the EBNF notation from the XML specification. [XML]

    name must not be any of the following:

       annotation-xml
   color-profile
   font-face
   font-face-src
   font-face-uri
   font-face-format
   font-face-name
   missing-glyph

    https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name