javascript - FireFox 中的自定义元素非法构造函数

Question

我有一个带有以下构造函数的 CustomElement:

export default class SomeCustomElement extends HTMLElement {
    constructor(templateId) {
        super();
        this.insertTemplateInstance(templateId);
    }
    ...
}

我可以毫无问题地在 Chrome 中注册该元素。

但是将 Firefox 与 webcomponents-loader.js 从 https://github.com/webcomponents/webcomponentsjs 加载的 polyfill 一起使用我在调用 super() 时收到错误消息 TypeError: Illegal constructor。

有人知道是什么原因造成的吗？

更多背景:

自定义元素的注册是这样的:

window.addEventListener("WebComponentsReady", function () {
    customElements.define(elementName, SomeCustomElement);
});

Answer 1

如果你不想出现这种错误，请使用 webcomponents-lite.js 而不是 webcomponent-loader.js ，这是由于以下事实引起的如果您使用 webcomponents-loader.js，polyfill 将被异步加载。

下面的示例适用于 Firefox(以及所有现代浏览器):

class SomeCustomElement extends HTMLElement
{
  constructor()
  {
    console.log( 'created' )
    super()
  }

  connectedCallback() {
    console.log( 'connected' )
    this.innerHTML = "Hello"
  }
}

customElements.define( 'c-e', SomeCustomElement ) 

<script src=https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js></script>

<c-e></c-e>

但是，如果您仍想使用 webcomponents-loader.js，则必须将自定义元素定义插入外部文件，并使用 HTML Imports 加载它:

<link rel="import" href="my-element.html">