我确信我遗漏了规范中的一些基本内容，但在运行于 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
你混淆了定义自主自定义元素（又名新的 HTML 标签）定制内置元素（又名标准 HTML 元素扩展），其语法略有不同。
For 自主定制元素:
class NoCE extends HTMLElement
...
customElements.define( 'no-ce', NoCE )
...
<no-ce><no-ce>
For 定制内置<div> Element:
class NoCE extends HTMLDivElement
...
customElements.define( 'no-ce', NoCE, { extends: 'div'} )
...
<div is='no-ce'></div>
Safari 不实现自定义的 buit-it 元素，因此会忽略extends选项并将您的代码作为简单的自主自定义元素进行处理。
另一方面，Chrome 和 Firefox 将忽略您的自定义元素定义，因为它不正确。
如果你想让你的自定义元素继承自<div>你应该首先延长NoCE与 一起上课HTMLDivElement，然后使用<div is="no-ce">句法。 （但是如果没有 polyfill，这在 Safari 中是行不通的。）
或者，如果您想使用基本的 HTML 标签创建自己的 HTML 标签<div>行为，您可以定义一个自治自定义元素并将其应用于{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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
