55

Is it possible to name your own custom elements <date>, <person>, <city> or others without the use of a dash? Can use define elements without them?

IMSoP
  • 89,526
  • 13
  • 117
  • 169
addyo
  • 2,798
  • 1
  • 14
  • 21

1 Answers1

93

All browsers support a finite list of HTML elements which are considered as "known". Elements which are unknown (e.g <city>, <person>) do not generally throw errors with the HTML parser in modern browsers and instead inherit from HTMLUnknownElement. In older versions of IE however, such elements would be inserted into the DOM as an empty node without any children (1).

The Custom Elements specification requires that all custom elements contain a hyphen (-) in the name. So rather than <person>, you would use <my-person> or <x-person>. These are valid names, whilst <person> is considered an unknown element.

The dash effectively allows the HTML parser to tell the difference between true custom elements and regular elements. It also allows us to enable a level of future capability when standards groups add new tags to HTML.

You can use any hyphen-separated name with the exception of:

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

To the best of my knowledge, these names are reserved names from SVG, MathML and other specs. For example, here's more info on the <font-face> element.

(1) This gave rise to the hack where developers would create a dummy HTML5 tag in IE (e.g <article>) using JavaScript so that they could then style it per any normal element with CSS.

Francis Fajardo
  • 63
  • 6
addyo
  • 2,798
  • 1
  • 14
  • 21
  • Would you be able to expand or link to why the `annotation-xml`/etc can't be used? – Sindre Sorhus Mar 20 '14 at 21:40
  • Sure! I've added a brief note. Basically, I believe they're reserved names for elements used or mentioned in other specs that you would want to avoid colliding with. – addyo Mar 20 '14 at 22:13
  • So in other words, you cannot overspecify a tag? – Albin Jul 14 '14 at 09:50
  • One thing worth mentioning is requirement for this elements to have lowercase names as well – Arek Bal Mar 24 '15 at 02:42
  • 3
    Does "must contain a hyphen" mean that a custom element can start with a hyphen? Anyone know? – Matthew Dean May 01 '15 at 20:47
  • 4
    I wish I knew this before I spent 2 hours beating my head against a wall trying to get polymer to work. This should be plastered all over the front page of any docs even closely related to custom elements. Chrome/FF/Safari throw no errors, and even show the element in the DOM tree, but refuse to render the inner html. Horrible behavior. – Tyguy7 Feb 06 '16 at 05:48
  • 6
    Can a custom element name contain two dashes, e.g. my-custom-element? – yglodt Aug 01 '16 at 21:20
  • @addyo can you clarify what you said about "In older versions of IE however, such elements [have problems]" — What about custom elements (containing dashes), do they also suffer from the same problems in old IE? – Matthias Aug 01 '19 at 17:12
  • 3
    Keep in mind that even though you're not supposed to create new elements without a dash in the name, it still works perfectly fine in all modern browsers if you do. – Gavin Mar 31 '20 at 13:20
  • 2
    @MatthewDean A custom element CANNOT start with a hyphen... but it can end with a hyphen! So this is not allowed: `<-comp>-comp>`, but this is allowed: `` – dallin Jun 17 '22 at 22:13
  • 2
    @yglodt Yes, a custom element CAN contain multiple dashes. – dallin Jun 17 '22 at 22:13
  • 1
    @Gavin As far as I am aware, while you can still use tags without a dash and style them, they will always be of type `HTMLUnknownElement`. In other words, you cannot define a class that extends an HTMLElement and then call `customElements.define('myelem', MyElem);` to register it as a custom element without an error or without adding a dash to the name. – dallin Jun 17 '22 at 22:16