Are custom elements valid HTML5?

html custom-element
d13 picture d13 · Mar 23, 2012 · Viewed 71k times · Source

I've been unable to find a definitive answer to whether custom tags are valid in HTML5, like this:

<greeting>Hello!</greeting>

I've found nothing in the spec one way or the other:

http://dev.w3.org/html5/spec/single-page.html

And custom tags don't seem to validate with the W3C validator.

Answer

jessegavin picture jessegavin · Mar 23, 2012

The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

Related questions

How to get list of registered custom elements

I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check? Or is there a way to get list of registered custom elements? I do document.registerElement, …

Read More
Difference between constructor and connectedCallback in custom elements v1

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with …

Read More
Failed to construct 'CustomElement' error when JavaScript file is placed in head

I have a custom element defined like so: class SquareLetter extends HTMLElement { constructor() { super(); this.className = getRandomColor(); } } customElements.define("square-letter", SquareLetter); When the JavaScript file is included in HTML <head> tag, the Chrome console reports this error: Uncaught …

Read More