Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.
Custom elements are part of a larger effort to "rationalise the platform", by explaining existing platform features (like the elements of HTML) in terms of lower-level author-exposed extensibility points (like custom element definition).
- The name of a custom element must contain a dash (-). So
<my-awesome-app>are all valid names, while
<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.
- You can't register the same tag more than once. Attempting to do so will throw a
DOMException. Once you've told the browser about a new tag, that's it. No take backs.
- Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (
More details here.