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

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

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

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

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

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

更多背景:

注册自定义元素的过程如下:

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

最佳答案

如果您不想发生此类错误，请使用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">

关于javascript - FireFox中的自定义元素非法构造函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43216056/