更新

由于这已经解决，我创建了一个存储库，其中包含完整的代码： 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>

Answer 1

截至2018年6月，可以通过以下步骤启用Firefox对自定义元素的支持

在搜索栏中输入about:config。
搜索dom.webcomponents.shadowdom.enabled点击以启用。
serch for dom.webcomponents.customelements.enabled点击启用。

希望这可以帮助那些人。

<强>更新：现在，自Firefox 63以来，默认情况下Firefox中支持自定义元素。

Answer 2

Firefox尚未发布自定义元素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功能检测自定义元素v1支持。

如何在Firefox中使用自定义元素？

更新

2 个答案: