我有这个基本的自定义元素示例。它适用于Chrome，但不适用于Firefox。有没有办法让它在Firefox中运行（没有聚合物，但可能是某种填充剂）？
我也启用了dom.webcomponents.enabled旗帜而没有任何成功。
由于这已经解决，我创建了一个存储库，其中包含完整的代码：https://github.com/peplow/webcomponent-example/
自定义元素html文件：
<template id="template">
<button id="button">Hallo</button>
<style media="screen">
button{
color:red;
}
</style>
</template>
<script>
var localDoc = document.currentScript.ownerDocument;
class toggleButton extends HTMLElement{
constructor(){
super();
this.shadow = this.attachShadow({mode: 'open'});
var template = localDoc.querySelector('#template');
this.shadow.appendChild(template.content.cloneNode(true));
this.shadow.querySelector('button').onclick = function(){
alert("Hello World");
}
}
static get observedAttributes() {return ['name']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'name') {
this.shadow.querySelector('#button').innerHTML = newValue;
}
}
}
customElements.define('x-toggle', toggleButton);
</script>
文件使用位置：
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="element.html">
<meta charset="utf-8">
</head>
<body>
<x-toggle name="Hello World"></x-toggle>
</body>
</html>
Firefox尚未发布Custom Elements v1，这是最新的标准，它指定customElements.define()作为定义元素的方式（与使用document.registerElement()的v0相反，并且是Firefox中的dom.webcomponents.enabled标志可用的）。
Chrome是目前唯一支持自定义元素v1的浏览器，但所有其他主流浏览器都支持它。
Firefox有an open bug for Custom Elements v1 support。
与此同时，您最好的选择是将Custom Elements v1 Polyfill用于不支持它的浏览器。您可以使用'customElements' in window功能检测Custom Elements v1支持。
截至2018年6月，可以通过以下步骤启用Firefox对自定义元素的支持
about:config。dom.webcomponents.shadowdom.enabled点击启用。希望这有助于那里的人。
更新：现在，自Firefox 63以来，默认情况下Firefox中支持自定义元素。