CustomElements在Firefox中不起作用，启用了about：config属性

Question

CanIuse说webcomponents v1在Firefox v.61中启用，about:config属性dom.webcomponents.customelements.enabled和dom.webcomponents.shadowdom.enabled设置为true。网上的许多帖子和文章都同意这一点。

所以我有Firefox版本61.0.2与上述属性设置，我有一个自定义元素定义如下所示。这在Chrome中呈现出预期效果，但在Firefox中，控制台上根本没有呈现任何内容且没有错误。

<template id="t">
   ...html content
</template>

<script>
    let template = document.currentScript.ownerDocument.querySelector('#t');

      class MyElement extends HTMLElement {

        constructor() {
          super();
          this.shadow = this.attachShadow({mode: 'open'});
          this.shadow.appendChild(template.content.cloneNode(true));
        }
      }
      customElements.define('my-element', MyElement);
</script>

如果它很重要，我试图在一个单独的html文件中使用自定义元素，我已导入包含上述代码的文件。

我知道有一个我可以使用的polyfill，但它在我的应用程序运行的环境中不可用。我必须遗漏一些东西，因为我在网上看到的一切似乎都表明Firefox应该能够像我定义的那样呈现元素。

Answer 1

我正在尝试在我导入的单独的html文件中使用自定义元素

我想那时你使用的是Firefox中没有实现的HTML Imports功能。

因此，您需要使用polyfill：您可以在polyfill github's repository上找到的文件html-imports.min.js。

<script src="html-imports.min.js"></script>
<link rel="import" href="your-custom-element.html">

或者（如果您不想使用HTML Imports），请将自定义元素的代码放在Javascript文件中：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.innerHTML = `...html content`;
  }
}
customElements.define('my-element', MyElement);