Question

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

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

我可以在Chrome中注册该元素而不会出现任何问题。

但是使用Firefox webcomponents-loader.js TypeError: Illegal constructor加载的polyfill，我会在调用super()时收到ErrorMessage window.addEventListener("WebComponentsReady", function () { customElements.define(elementName, SomeCustomElement); });。

有人知道造成这种情况的原因吗？

更多背景资料：

注册自定义元素的方式如下：

<div class="row">
  <div class="col-md-2 red-border">
    asdasdlknadlamaslfknasjşklfnsadjşlkfnbasdşjlfksnadbfjşa 
  </div>
</div>

.red-border{
   text-align: center;
   margin-top: 50px;
   border: solid 2px red;
   height: 250px;
   margin-left: 20px;
}

Answer 1

如果您不想发生此类错误，请使用webcomponents-lite.js代替webcomponent-loader.js，这是因为如果您使用{{1}，则会异步加载polyfills }}

以下示例适用于Firefox（以及每个现代浏览器）：

＆＃13;

webcomponents-loader.js

＆＃13;

class SomeCustomElement extends HTMLElement
{
  constructor()
  {
    console.log( 'created' )
    super()
  }

  connectedCallback() {
    console.log( 'connected' )
    this.innerHTML = "Hello"
  }
}

customElements.define( 'c-e', SomeCustomElement )

＆＃13;

但是，如果您仍想使用<script src=https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js></script> <c-e></c-e>，则必须在外部文件中插入自定义元素定义，并使用HTML Imports加载它：

webcomponents-loader.js

Answer 2

预先警告：我不是html导入的忠实粉丝。我偶然发现了尝试让基于ES 6类的自定义元素在Firefox中运行。对于基于接受的答案的条件 - polyfill-loading-no-html-import解决方案，请继续阅读...

有条件地加载polyfill有点棘手。 Per @ Supersharp的回答/评论，由于某种原因，polyfill 必须同步加载（尽管在官方文档中没有提到这一点）。所以现在你有两个没有吸引力的选择：无条件地包含它以获得必要的同步加载或者......使用document.write：

<script>
;(function() {
  var str = '';
  // You could make this more fine-grained if desired by doing
  // more feature detection and loading the minimal polyfill file 
  if (!window.customElements) str += '<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>';
  str += '<script src="./elements.js"></script>';
  document.write(str);
})();
</script>
<foo-bar></foo-bar>

然后在elements.js：

class FooBar extends HTMLElement {
  constructor () {
    console.log("constructing");
    super();
  }

  connectedCallback () {
    console.log("connecting");
  }

  disconnectedCallback () {
    console.log("disconnecting");
  }
};
// Note that because of the synchronous loading we don't
// need to listen for the event
customElements.define('foo-bar', FooBar);

document.write因为充分的理由而受到广泛的不喜欢，但这是恕我直言，这是一个合法的用例。请注意，此处的大多数异议（无预取等）都可以通过使用服务工作者（对于支持它们的浏览器）来改善。

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

2 个答案: