Создать элемент HTML с ES6

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

Моя идея состоит в том, чтобы создать только для JavaScript- UI Framework без использования "собственных" фрагментов 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 с использованием пользовательских элементов