Do Custom Elements require a dash in their name?

Question

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?

Spotty

Answer 1

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.

Spotty

Would you be able to expand or link to why the annotation-xml/etc can't be used? – Chez

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. – Spotty

So in other words, you cannot overspecify a tag? – Blenny

One thing worth mentioning is requirement for this elements to have lowercase names as well – Solve

Does "must contain a hyphen" mean that a custom element can start with a hyphen? Anyone know? – Dispersive

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. – Explanatory

Can a custom element name contain two dashes, e.g. my-custom-element? – Southport

@Spotty 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? – Possibility

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. – Sundowner

@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: <comp-></comp-> – Glenglencoe

@Southport Yes, a custom element CAN contain multiple dashes. – Glenglencoe

@Sundowner 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. – Glenglencoe