如何在 Firefox 中添加自定义 HTML 元素？ （铬作品）

Question

我正在探索 Vanilla ES6 Javascript。使用自定义 HTML 元素会很好。

我添加了一个自定义 HTML 元素，定义为 HTMLElement 类，使用

customElements.define('my-div', myDiv);

然后我用它创建一个元素并将其添加到 DOM。

const elem = document.getElementById('test');
const myDiv = document.createElement('my-div'); 
elem.insertBefore(myDiv, null);

这适用于 Chrome，但不适用于 Firefox。但它在那里被标记为实验性的，所以它可能会来。

Codepen

class myDiv extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<div>Hello custom HTML element!</div>';
  }
}

customElements.define('my-div', myDiv);

window.addEventListener('load', () => {
  const elem = document.getElementById('test');
  const myDiv = document.createElement('my-div');
  
  elem.insertBefore(myDiv, null);
});

<div id="test"></div> 

我现在如何使用它，而不使用像 babel 这样的库？ （最好也适用于 Safari 和 Edge）

Answer 1

确保在about:config 中启用dom.webcomponents.shadowdom.enabled 和dom.webcomponents.customelements.enabled。在 FF 60 中工作正常。