Why does v1 web component customElements.define() throw TypeError

Question

I'm playing around with v1 web components. According to Eric Bidelman in Custom elements v1: reusable web components, a v1 web component can be defined and created with:

class App extends HTMLElement {

  attachedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innterHTML = `<div>web component</div>`

  }
}

and

<x-app></x-app>

However, when running the code in the latest version of Chrome Canary and with the v1 polyfill in Firefox, the following error is thrown:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Answer 1

If you transpile your es6 code you'll need to include the native-shim.js code from webcomponents/src/CustomElements/vs.