This restriction allows the parser to distinguish custom elements from regular elements but also ensures forward compatibility when new tags are added to HTML.
For example, it's perfectly happy if we declare // "tabs" is not a valid custom element name document.create Element('tabs').__proto__ === HTMLUnknown Element.prototype // "x-tabs" is a valid custom element name document.create Element('x-tabs').__proto__ == HTMLElement.prototype much later.
Before elements are upgraded to their definition, they're called unresolved elements.
These are HTML elements that have a valid custom element name but haven't been registered.
This table might help keep things straight: Think of unresolved elements as in limbo.
They're potential candidates for the browser to upgrade later on.
The browser says, "You have all the right qualities I'm looking for in a new element. Elements can define special methods for tapping into interesting times of their existence.I promise to upgrade you when I'm given your definition". These methods are appropriately named the lifecycle callbacks. Future me/you will know exactly what it does just by examining its declarative backbone. It's meaningful, easy to understand, and best of all, it's maintainable.The second argument is an (optional) object describing the element's See Adding JS properties and methods below for more information on creating element prototypes.Have you ever wondered why the HTML parser doesn't throw a fit on non-standard tags?