Question

CanIuse表示在Firefox v。61中启用了webcomponents v1，并将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导入），请将自定义元素的代码放在Javascript文件中：

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

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

1 个答案: