Why web component v1 customElements.define () throw TypeError

Question

I play with web components v1. According to Eric Bidelman in Custom Elements v1: Reusable Web Components , the web component v1 can be defined and created using:

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

and

 <x-app></x-app> 

However, when you run the code in the latest version of Chrome Canary and with v1 polyfill in Firefox, the following error appears:

 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 redraw your es6 code, you will need to include the native-shim.js code from webcomponents / src / CustomElements / vs.