javascript - CustomElements 在 Firefox 中无法使用大约 :config properties enabled

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

那么我想您使用的是 HTML Imports Firefox 中未实现的功能。

因此您需要为此使用一个 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 导入)，将自定义元素的代码放入 Javascript 文件中:

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