The Validity of Custom Element Tag Names

Jim Nielsen, in his article shows a nice way to test the validity of element tag names:

<my-custom-element>❌ &lt;my-custom-element&gt;</my-custom-element>
<capital-LETTERS>❌ &lt;capital-LETTERS&gt;</capital-LETTERS>
<with-per.iod>❌ &lt;with-per.iod&gt;</with-per.iod>
<with-digit0>❌ &lt;with-digit0&gt;</with-digit0>
<my-0.02>❌ &lt;my-0.02&gt;</my-0.02>
<my-$0.02>❌ &lt;my-$0.02&gt;</my-$0.02>
<my-2¢>❌ &lt;my-2¢&gt;</my-2¢>
<branded-element™>❌ &lt;branded-element™&gt;</branded-element™>
<emotion-😍>❌ &lt;emotion-😍&gt;</emotion-😍>
<dont-use-or-we-sue©>

body {
  font-family: monospace;
  display: flex;
  flex-direction: column;
  margin: 50px;
  font-size: 1.5em;
}

[
  "my-custom-element",
  "capital-letters",
  "with-per.iod",
  "with-digit0",
  "my-0.02",
  "my-$0.02",
  "branded-element™️",
  "emotion-😍",
  "dont-use-or-we-sue©"
].forEach((str) => {
  customElements.define(
    str,
    class extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `✅ <code>${this.tagName.toLowerCase()}</code>`;
      }
    }
  );
});

Demo