Javascript CustomElements在启用了about:config属性的Firefox中不工作

表示Firefox v中启用了

webcomponents

v1。61将

about:config

properties

dom.webcomponents.customelements.enabled

和

dom.webcomponents.shadowdom.enabled

设置为true。网上的许多帖子和文章都同意这一点

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

…html内容
让template=document.currentScript.ownerDocument.querySelector（'t'）；
类MyElement扩展了HtmleElement{
构造函数（）{
超级（）；
this.shadow=this.attachShadow（{mode:'open'}）；
this.shadow.appendChild（template.content.cloneNode（true））；
}
}
自定义元素。定义（'my-element'，MyElement）；

如果有必要，我将尝试在一个单独的html文件中使用custom元素，我已经将包含上述代码的文件导入到该文件中

我知道我可以使用polyfill，但它在我的应用程序运行的环境中不可用。我肯定遗漏了什么，因为我在网上读到的所有内容似乎都表明Firefox应该能够按照我的定义呈现元素

我试图在一个单独的html文件中使用自定义元素，我已经导入了该文件

我认为您使用了Firefox中没有实现的功能

因此，您需要使用一个polyfill：可以在上找到的文件html imports.min.js

---

谢谢你。我没有意识到FF不支持rel链接，这就是问题所在。由于我不能在部署环境中使用polyfills，我按照您的建议导入了一个js文件，并将模板和样式元素移动到主html文件中。请注意，如果您不想将模板放入主文档中，可以使用

XMLHttpRequest的
fetch
加载它
<script src="html-imports.min.js"></script>
<link rel="import" href="your-custom-element.html">

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