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

Question

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

我使用

添加了一个定义为HTMLElement类的自定义HTML元素

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

确保在 <?php $dsn = getenv('MYSQL_DSN'); $user = getenv('MYSQL_USER'); $password = getenv('MYSQL_PASSWORD'); if (!isset($dsn, $user) || false === $password) { throw new Exception('Set MYSQL_DSN'); } $db = new PDO($dsn, $user, $password); $statement = $db->prepare("SELECT clicks from display_inbox"); $statement->execute(); $all = $statement->fetchAll(); foreach ($all as $data) { echo $data["clicks"]."<br>"; } ?> 中启用dom.webcomponents.shadowdom.enabled和dom.webcomponents.customelements.enabled。在FF 60中正常工作。