创建自定义 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() {&nbsp; &nbsp; var ref = Reflect.construct(HTMLElement,[], this.constructor) ;&nbsp; &nbsp; return ref;};NeoElement.prototype = Object.create(HTMLElement.prototype);NeoElement.prototype.constructor = NeoElement;NeoElement.prototype.connectedCallback = function(){&nbsp; &nbsp; this.innerHTML = `<h1>Hello world</h1>`;};customElements.define('neo-element', NeoElement);<neo-element></neo-element>