CustomElements 在启用 about:config 属性的 Firefox 中不起作用

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：文件 html-imports.min.js，您可以在 polyfill github's repository 上找到该文件。

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

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

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