Allow more characters in custom element names

This follows whatwg/dom#1079.

Author: domenic

source

@@ -3358,6 +3358,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#abortcontroller-signal-abort">signal abort</dfn></li>
      <li><dfn data-x="AbortSignal-add" data-x-href="https://dom.spec.whatwg.org/#abortsignal-add">add</dfn></li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-get-by-name">get an attribute by name</dfn> algorithm</li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#valid-element-local-name">valid element local name</dfn></li>
     </ul>
 
     <p>The following features are defined in <cite>UI Events</cite>: <ref>UIEVENTS</ref></p>
@@ -73369,43 +73370,52 @@ document.body.append(parent);
 
   <hr>
 
-  <p>A <dfn export>valid custom element name</dfn> is a sequence of characters <var>name</var> that
-  meets all of the following requirements:</p>
+  <p>A string <var>name</var> is a <dfn export>valid custom element name</dfn> if all of the
+  following are true:</p>
 
   <ul>
    <li>
-    <p><var>name</var> must match the <code
-    data-x="prod-PotentialCustomElementName">PotentialCustomElementName</code> production:</p>
+    <p><var>name</var> is a <span>valid element local name</span>;</p>
 
-    <dl>
-     <dt><code data-x=""><dfn
-     data-x="prod-PotentialCustomElementName">PotentialCustomElementName</dfn> ::=</code></dt>
-     <dd><code data-x="">[a-z] (<span data-x="prod-PCENChar">PCENChar</span>)* '-'
-     (<span data-x="prod-PCENChar">PCENChar</span>)*</code></dd>
-
-     <dt><code data-x=""><dfn data-x="prod-PCENChar">PCENChar</dfn> ::=</code></dt>
-     <dd><code data-x="">"-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] |
-     [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] |
-     [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
-     [#x10000-#xEFFFF]</code></dd>
-    </dl>
+    <p class="note">This ensures the custom element can be created with <code
+    data-x="dom-Document-createElement">createElement()</code>.</p>
+   </li>
 
-    <p>This uses the <a href="https://www.w3.org/TR/xml/#sec-notation">EBNF notation</a> from the
-    <cite>XML</cite> specification. <ref>XML</ref></p>
+   <li>
+    <p><var>name</var>'s 0th <span>code point</span> is an <span>ASCII lower alpha</span>;</p>
+
+    <p class="note">This ensures the HTML parser will treat the name as a tag name instead of as
+    text.</p>
    </li>
 
    <li>
-    <p><var>name</var> must not be any of the following:</p>
+    <p><var>name</var> does not contain any <span data-x="ASCII upper alpha">ASCII upper
+    alphas</span>;</p>
+
+    <p class="note">This ensures the user agent can always treat HTML elements
+    ASCII-case-insensitively.</p>
+   </li>
+
+   <li>
+    <p><var>name</var> contains a U+002D (-); and</p>
+
+    <p class="note">This is used for namespacing and to ensure forward compatibility (since no
+    elements will be added to HTML, SVG, or MathML with hyphen-containing local names going
+    forward).</p>
+   </li>
+
+   <li>
+    <p><var>name</var> is not one of the following:</p>
 
     <ul class="brief">
-     <li><code data-x="">annotation-xml</code></li>
-     <li><code data-x="">color-profile</code></li>
-     <li><code data-x="">font-face</code></li>
-     <li><code data-x="">font-face-src</code></li>
-     <li><code data-x="">font-face-uri</code></li>
-     <li><code data-x="">font-face-format</code></li>
-     <li><code data-x="">font-face-name</code></li>
-     <li><code data-x="">missing-glyph</code></li>
+     <li>"<code data-x="">annotation-xml</code>"</li>
+     <li>"<code data-x="">color-profile</code>"</li>
+     <li>"<code data-x="">font-face</code>"</li>
+     <li>"<code data-x="">font-face-src</code>"</li>
+     <li>"<code data-x="">font-face-uri</code>"</li>
+     <li>"<code data-x="">font-face-format</code>"</li>
+     <li>"<code data-x="">font-face-name</code>"</li>
+     <li>"<code data-x="">missing-glyph</code>"</li>
     </ul>
 
     <p class="note">The list of names above is the summary of all hyphen-containing element names
@@ -73414,34 +73424,14 @@ document.body.append(parent);
    </li>
   </ul>
 
-  <div class="note">
-   <p>These requirements ensure a number of goals for <span data-x="valid custom element name">valid
-   custom element names</span>:</p>
-
-   <ul>
-    <li><p>They start with an <span>ASCII lower alpha</span>, ensuring that the HTML parser will
-    treat them as tags instead of as text.</li>
-
-    <li><p>They do not contain any <span data-x="ASCII upper alpha">ASCII upper alphas</span>,
-    ensuring that the user agent can always treat HTML elements ASCII-case-insensitively.</p></li>
-
-    <li><p>They contain a hyphen, used for namespacing and to ensure forward compatibility (since no
-    elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the
-    future).</p></li>
-
-    <li><p>They can always be created with <code
-    data-x="dom-Document-createElement">createElement()</code> and <code
-    data-x="dom-Document-createElementNS">createElementNS()</code>, which have restrictions that go
-    beyond the parser's.</p></li>
-   </ul>
-
-   <p>Apart from these restrictions, a large variety of names is allowed, to give maximum
-   flexibility for use cases like <code data-x="">&lt;math-α></code> or <code
-   data-x="">&lt;emotion-😍></code>.</p>
-  </div>
+  <p>Apart from these restrictions, a large variety of names is allowed, to give maximum
+  flexibility for use cases like <code data-x="">&lt;math-α></code> or <code
+  data-x="">&lt;emotion-😍></code>.</p>
 
   <div w-nodev>
 
+  <hr>
+
   <p>A <dfn export>custom element definition</dfn> describes a <span>custom element</span> and
   consists of:</p>