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?
Custom Elements allow web developers to define new types of HTML elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it's quite possibly the most important. Web Components don't exist without the features unlocked by custom elements: Define new HTML/DOM elements.
The functionality of a custom element is defined using an ES2015 class which extends HTMLElement . Extending HTMLElement ensures the custom element inherits the entire DOM API and means any properties/methods that you add to the class become part of the element's DOM interface.
The customElements. get() method can be used to check whether a given custom element has already been registered in the page. This can be used to find whether a given custom element name is available in the page or not, and prevent clashes with another custom element.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With