title: Uncaught TypeError: Custom element constructor returned a wrong element
body: <p>I try to learn WebComponents, and it's not easy as that technology is unclear yet and a bit underdeveloped.
  The main issue I have with it, it's based on JavaScript Class syntax, where I try to keep code in a functional/prototype programming way.</p>
  <p>Then made this script. Custom Element exists, inherits HTMLElement methods, shadowDom, and also styling does work.</p>
  <p>But...</p>
  <p>I encountered error:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;x-foo&gt;&lt;/x-foo&gt;
          &lt;script&gt;
              function Xfoo( str ) {
                  this.str = str;
              };
  
              let XFoo = &quot;x-foo&quot;;
              XFoo.constructor = &quot;x-foo&quot;;
  
              HTMLElement.prototype.XFoo = new Xfoo();
  
              customElements.define( XFoo, XFoo.constructor );
  
              const xfoo = document.getElementsByTagName(XFoo)[0];
              console.log( xfoo );
              const shadow = xfoo.attachShadow( { mode: &quot;open&quot; } );
  
              const styleNode = document.createElement(&quot;style&quot;);
              styleNode.textContent = `
                  * {
                      background-color: blue;
                      font-size: 32px;
                  }
             `;
  
              shadow.appendChild( styleNode );
  
              const text = document.createElement(&quot;span&quot;);
              text.textContent = &quot;content&quot;;
              shadow.appendChild( text );
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>Uncaught TypeError: Custom element constructor returned a wrong element
      &lt;anonymous&gt;
  </code></pre>
  <p>I tried to look through documentation, but can't find what that constructor element should return, so I can just return it... Or figure out the way to make it properly.</p>
  <p>EDIT: Summary - This Script Works. I just want to get rid of this error. Get to know how to fix it or make it better, avoiding OOP and Class based code as much as I can.</p>
  <p>Thanks for any help in advance.</p>