title: customElements not working in google chrome
body: <p>I'm trying to use some custom elements in my website, and in firefox it works great so far. In google chrome however, it just fails silently - the constructor of my custom element is never called, and it also doesn't throw an error.</p>
  
  <p>Suppose this minimal example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
              class MyElement extends HTMLDivElement {
                  constructor(){
                      super();
                      this.style.background = "#00ff00";
                      console.log("Created custom element!");
                  }
              }
              function addCustomElement(){
                  customElements.define("my-element",MyElement,{extends:"div"});
                  console.log("Added MyElement to custom element registry!");
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="addCustomElement()"&gt;
          &lt;my-element style="display:block;width:100px;height:100px;background:#ff0000"&gt;&lt;/my-element&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would expect this to create a custom element class <code>MyElement</code> and convert all <code>my-element</code>-elements in the DOM into instances of that class once added to the custom element registry, turning the originally red component green. In firefox, this is exactly what happens, but in google chrome, it stays red. The console indicates that the element was added to the registry, but its constructor was never called.</p>
  
  <p>Am I missing something? Is this a problem with chrome, or am I doing something wrong? And how can I get it to work there?</p>