使用ES6创建HTML元素

Question

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

按照常规方式，您可以按照以下方式创建元素：

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);

我的想法是，创建一个 -only JavaScript - UI框架，而不使用＆＃34; native＆＃34; HTML片段......

Answer 1

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您需要使用类定义下方的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 Using Custom Elements