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?
1 Answer
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.
-
Would you be able to expand or link to why the
annotation-xml
/etc can't be used? Mar 20, 2014 at 21:40 -
2Does "must contain a hyphen" mean that a custom element can start with a hyphen? Anyone know? May 1, 2015 at 20:47
-
2I 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.– Tyguy7Feb 6, 2016 at 5:48
-
4
-
1Keep 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.– GavinMar 31, 2020 at 13:20