Lets say we want to write some quick html and js thing to test something. We want a text field and a button to login with a username and if logged, some text with the username saying hello.
Ok, we skip all the html, head and body tags and we just write this:
<login>
<input type="text">
<button onclick="login()">Log in</button>
</login>
<hello>
Hello <username>
</hello>
We add and a script tag in the end and we are done (and it works, this is not a joke)
It may not be obvious but we are not following the law of the "Valid custom element names" and if we then define some components with these name you are going to get the "Failed to execute 'define', 'hello' is not a valid custom element name".
Very important check, image this check not being there all the bad things that could happen. Like when you try to create a component "icon" but there is no hyphen there, so you spend all day trying to figure out if "a-icon" or "icon-" is the least ugly of the two, and then you are unable to sleep thinking that there must be some other way to cheat the system... there must be... Thank you whatwg.
done_