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

I'm trying to use the custom element in a separate html file which I'v imported

那么我想您使用了 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);

CustomElements 在启用 about:config 属性的情况下无法在 Firefox 中运行

CustomElements not working in Firefox with about:config properties enabled

javascript

firefox

web-component

shadow-dom

custom-element