Disallow mismatches between custom element local names and brands

Without this fix, it is possible to install the brand for one type of
element on an element with a different local name, in one of two
different ways (both shown here as examples). This fix makes the super()
call throw when this is attempted, preserving the invariant that a brand
is only installed on an element with the correct local name.

Originally discussed at
https://bugs.chromium.org/p/chromium/issues/detail?id=619062.

source

@@ -2999,6 +2999,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
      <li><dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#sec-execution-contexts">JavaScript execution context</dfn></li>
      <li><dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#execution-context-stack">JavaScript execution context stack</dfn></li>
      <li><dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#running-execution-context">running JavaScript execution context</dfn></li>
+     <li><dfn data-x-href="https://tc39.github.io/ecma262/#active-function-object">active function object</dfn></li>
      <li><dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#sec-code-realms">JavaScript realm</dfn>
      <li>The <dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#current-realm">current Realm Record</dfn></li>
      <li><dfn data-noexport="" data-x-href="https://tc39.github.io/ecma262/#use-strict-directive">Use Strict Directive</dfn>
@@ -9682,6 +9683,61 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
     NewTarget will be undefined).</p>
    </li>
 
+   <li>
+    <p>If <var>definition</var>'s <span data-x="concept-custom-element-definition-local-name">local
+    name</span> is equal to <var>definition</var>'s <span
+    data-x="concept-custom-element-definition-name">name</span> (i.e., <var>definition</var> is for
+    an <span>autonomous custom element</span>), then:</p>
+
+    <ol>
+     <li>
+      <p>If the currently-executing constructor is not <code>HTMLElement</code>, then throw a
+      <code>TypeError</code> and abort these steps.</p>
+
+      <div class="example no-backref">
+       <p>This can occur when a custom element is defined to not extend any local names, but
+       inherits from a non-<code>HTMLElement</code> class:</p>
+
+       <pre>customElements.define("bad-1", class Bad1 extends HTMLParagraphElement {});</pre>
+
+       <p>In this case, during the (implicit) <code data-x="">super()</code> call that occurs when
+       constructing an instance of <code data-x="">Bad1</code>, the currently-executing constructor
+       is <code>HTMLParagraphElement</code>, not <code>HTMLElement</code>.</p>
+      </div>
+     </li>
+    </ol>
+   </li>
+
+   <li>
+    <p>Otherwise (i.e., if <var>definition</var> is for a <span>customized built-in
+    element</span>):</p>
+
+    <ol>
+     <li><p>Let <var>valid local names</var> be the list of local names for elements defined in this
+     specification or in <span>other applicable specifications</span> that use the <span>active
+     function object</span> as their <span>element interface</span>.</p></li>
+
+     <li>
+      <p>If <var>valid local names</var> does not contain <var>definition</var>'s <span
+      data-x="concept-custom-element-definition-local-name">local name</span>, then throw a
+      <code>TypeError</code> and abort these steps.</p>
+
+      <div class="example no-backref">
+       <p>This can occur when a custom element is defined to extend a given local name but inherits
+       from the wrong class:</p>
+
+       <pre>customElements.define("bad-2", class Bad2 extends HTMLQuoteElement {}, { extends: "p" });</pre>
+
+       <p>In this case, during the (implicit) <code data-x="">super()</code> call that occurs when
+       constructing an instance of <code data-x="">Bad2</code>, <var>valid local names</var> is the
+       list containing <code>q</code> and <code>blockquote</code>, but <var>definition</var>'s <span
+       data-x="concept-custom-element-definition-local-name">local name</span> is <code>p</code>,
+       which is not in that list.</p>
+      </div>
+     </li>
+    </ol>
+   </li>
+
    <li><p>Let <var>prototype</var> be <var>definition</var>'s <span
    data-x="concept-custom-element-definition-prototype">prototype</span>.</p></li>