自定义元素适用于 Safari，但不适用于 Firefox 和 Chrome答案

【问题标题】：Custom elements works for Safari but not for Firefox and Chrome自定义元素适用于 Safari，但不适用于 Firefox 和 Chrome
【发布时间】：2019-01-12 14:20:18
【问题描述】：

我确定我在规范中遗漏了一些基本内容，但是在运行 Safari 的 Mac 上构建了大量自定义元素后，我发现它们不适用于 Firefox 和 Chrome。我错过了什么？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>NoCE</title>
        <script>
            class NoCE extends HTMLElement {
                constructor(args) {
                    super();
                }

                connectedCallback() {
                    this.innerHTML = "<p>It Works</p>";
                }

                attributeChangedCallback(name, oldValue, newValue, namespaceURI) {}

                disconnectedCallback() {}

                adoptedCallback() {}

                static get observedAttributes() { return []; }
            }

            customElements.define("no-ce", NoCE, { extends: "div" });
        </script>
    </head>
    <body>
        <no-ce>
            No custom elements
        </no-ce>
    </body>
</html>

在 Safari 中，页面显示“It Works”。在 Firefox 和 Chrome 中，它显示“无自定义元素”（在 Mac OS X 上运行。）

Safari 12.0.2 火狐 64.0.2 铬 71.0.3578.98

【问题讨论】：

我看到删除 { extends: "div" } 有帮助，但后来我失去了 div 继承。

标签： javascript google-chrome firefox web-component custom-element

【解决方案1】：

您将 自治自定义元素（又名新 HTML 标记）与 自定义内置元素（又名标准 HTML 元素扩展名）的定义混在一起，它们的语法略有不同.

对于自治自定义元素：

class NoCE extends HTMLElement
...
customElements.define( 'no-ce', NoCE )
...
<no-ce><no-ce>

对于自定义内置<div>元素：

class NoCE extends HTMLDivElement
...
customElements.define( 'no-ce', NoCE, { extends: 'div'} )
...
<div is='no-ce'></div>

Safari 不实现自定义的 buit-it 元素，因此将忽略 extends 选项并将您的代码作为简单的自主自定义元素处理。

另一方面，Chrome 和 Firefox 会忽略您的自定义元素定义，因为它不正确。

如果您想让您的自定义元素继承自 <div>，您应该首先使用 HTMLDivElement 扩展 NoCE 类，然后使用 <div is="no-ce"> 语法。（但如果没有 polyfill，这在 Safari 中是行不通的。）

或者，如果您想创建自己的具有基本 <div> 行为的 HTML 标记，您可以定义一个自主的自定义元素并将{display:block} CSS 样式应用于它。

class ACE extends HTMLElement {
  connectedCallback() {
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `<style> :host { display: block } </style>
                      Autonomous CE works`
  }
}
customElements.define( 'a-ce', ACE )


class CBE extends HTMLDivElement {
  connectedCallback() {
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `Customized DIV works`
  }
}
customElements.define("c-ce", CBE, { extends: "div" } )

<a-ce>autonomous custom element not implemented</a-ce>

<div is="c-ce">customized built-in element not implemented</div>

【讨论】：

太棒了。谢谢。