我有一个基本的自定义元素示例。它在Chrome中可以工作，但在Firefox中无法工作。是否有一种方法可以让它在Firefox中工作（不需要使用Polymer，但可能需要某种Polyfill）？
我还启用了
我还启用了
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>