使用ES6创建HTML元素

Question

对于一个应用程序，我想在ES6创建基于对象的组件。

通常，您可以按以下方式创建Elements：

var element = document.createElement('YourElement');
element.innerHTML = 'Content';
document.querySelector('body').appendChild(element);

我如何在ES6创建它们，例如：

export default class Container extends HTMLDivElement {
    constructor() {
        super();
        this.innerHTML = 'Content';
    }   
}

有这些例子吗？

var container = new Container();
document.querySelector('body').appendChild(container);

我的想法是，创建一个仅JavaScript- UI框架，而无需使用“本地” HTML代码段...

Answer 1

 <div class='body'> </div> <script> class Container extends HTMLElement { constructor() { super(); console.log( 'Constructed' ) } connectedCallback() { console.log('Callback'); this.innerHTML = "Content"; } } customElements.define('my-contain', Container); let container = new Container(); document.querySelector('.body').appendChild(container); </script> 

您需要在类定义下方的CustomElementRegistry中注册您的组件，并利用connectedCallback() 。

export default class Container extends HTMLDivElement {
    constructor() {
        super();
        this.innerHTML = 'Content'; // Does Nothing
    } 
    connectedCallback() { // Fires when attached
      console.log('Callback');
      this.innerHTML = "Content";
    }  
}

customElements.define('my-contain', Container, { extends: "div" });

自定义组件的生命周期挂钩

有关CustomElementRegistry的更多信息，请点击此处： MDN CustomElementRegistry

有关此类实现的更多信息，请参见 ： 使用自定义元素的MDN