polymer - 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?

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.