自定义元素在启用 about:config 属性的情况下在 Firefox 中不起作用

Question

CanIuse表示webcomponents在Firefox v. 61中启用了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 文件中使用自定义元素

我想你使用火狐中没有实现的HTML导入功能。

因此，您需要为此使用polyfill：您可以在polyfill github的存储库中找到的文件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);