自定义元素适用于Safari，但不适用于Firefox和Chrome [英] Custom elements works for Safari but not for Firefox and Chrome
问题描述
我确定我遗漏了规范中的一些基本内容，但是在Safari上运行的Mac上构建了大量自定义元素后，我发现它们在Firefox和Chrome上不起作用.我想念什么?
I'm sure I'm missing something fundamental from the spec, but after building a large set of custom elements on the Mac running on Safari, I find they don't work on Firefox and Chrome. What am I missing?
<!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中，页面显示有效".在Firefox和Chrome中，它显示无自定义元素"(在Mac OS X上运行.)
In Safari the page shows "It Works". In Firefox and Chrome it shows "No Custom Elements" (running on Mac OS X.)
Safari 12.0.2 Firefox 64.0.2 铬71.0.3578.98
Safari 12.0.2 Firefox 64.0.2 Chrome 71.0.3578.98
推荐答案
您将自治自定义元素(又称新HTML标记)的定义与自定义内置元素混合在一起>(又名标准HTML元素扩展名)，语法略有不同.
You mixed up definitions of autonomous custom element (aka new HTML tag) with customized buit-in element (aka standard HTML element extension) which have a slightly different syntax.
对于自治自定义元素:
class NoCE extends HTMLElement
...
customElements.define( 'no-ce', NoCE )
...
<no-ce><no-ce>
对于自定义内置<div>元素:
For Customized Built-in <div> Element:
class NoCE extends HTMLDivElement
...
customElements.define( 'no-ce', NoCE, { extends: 'div'} )
...
<div is='no-ce'></div>
Safari不会实现自定义的buit-it元素，因此将忽略extends选项，并将您的代码作为简单的自定义自定义元素进行处理.
Safari doesn't implement customized buit-it elements, and therefore will ignore the extends option and process your code as a simple autonomous custom element.
另一方面，Chrome和Firefox将忽略您的自定义元素定义，因为它不正确.
On the other hand, Chrome and Firefox will ignore your custom element definition because it is not correct.
如果要使自定义元素继承自<div>，则应首先使用HTMLDivElement扩展NoCE类，然后使用<div is="no-ce">语法. (但是，如果没有polyfill，那将无法在Safari中使用.)
If you want to make your custom element inherit from <div> you should first extend the NoCE class with HTMLDivElement, and then use the <div is="no-ce"> syntax. (But that won't work in Safari without a polyfill.)
或者，如果您想使用基本的<div>行为创建自己的HTML标签，则可以定义一个自主的自定义元素，并以{display:block} CSS样式对其应用.
Alternately, if you want to create your own HTML tag with a basic <div> behavior, you could define an autonomous custom element and apply to it the {display:block} CSS style.
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>
这篇关于自定义元素适用于Safari，但不适用于Firefox和Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
