为什么v1 Web组件customElements.define（）抛出TypeError

Question

我正在玩v1网络组件。根据Eric Bidelman在“ 自定义元素v1：可重用的Web组件”中所述，可以使用以下方式定义和创建v1 Web组件：

class App extends HTMLElement {

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

  }
}

和

<x-app></x-app>

但是，在最新版本的Chrome Canary中运行代码并在Firefox中使用v1 polyfill时，会引发以下错误：

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

Answer 1

如果您转译 es6 代码，则需要包含 webcomponents/src/CustomElements/vs 中的 native-shim.js 代码。