创建自定义 html 元素时未调用连接的回调

Question

我试图使用 JavaScript 在 HTML 中创建自定义标记。我想使用 ES6 JavaScript 语法创建自定义元素。我编写了此代码来创建自定义元素：customElements.define('neo-element', NeoElement);function NeoElement (){    var ref =  Reflect.construct(HTMLElement,[], this.constructor) ;    return ref;};NeoElement.prototype = Object.create(HTMLElement.prototype);NeoElement.prototype.constructor = NeoElement;NeoElement.prototype.connectedCallback = function(){    this.innerHTML = `<h1>Hello world</h1>`;};<neo-element></neo-element>我已经验证 NeoElement 正确扩展了 HTMLElement，但仍然没有在<neo-element>标签内打印任何内容。任何人都可以查看代码并告诉我 ES5 语法中缺少什么吗？

Answer 1

它不工作，因为你打电话customElements.define-and从而升级<neo-element>到的实例NeoElement，之前你已经定义NeoElement.prototype，NeoElement.prototype.constructor和NeoElement.prototype.connectedCallback。

如果你移动customElements.define到最后它工作正常：

function NeoElement() {

    var ref = Reflect.construct(HTMLElement,[], this.constructor) ;

    return ref;

};

NeoElement.prototype = Object.create(HTMLElement.prototype);

NeoElement.prototype.constructor = NeoElement;

NeoElement.prototype.connectedCallback = function(){

    this.innerHTML = `<h1>Hello world</h1>`;

};

customElements.define('neo-element', NeoElement);

<neo-element></neo-element>