Как отрисовать шаблон в custom element при повторной вставке на страницу?

Question

[romazhan]

class MyCustomElement extends HTMLElement {
    constructor(template) { super();
        this._template = template;
        this._shadow = this.attachShadow({mode : 'open'});
    }

    connectedCallback() {
        return this._shadow.appendChild(this._template);
    }
}

window.customElements.define('my-element', MyCustomElement);

Если первый раз вставить на страницу, то шаблон отрисуется:

document.body.appendChild(document.createElement('my-element'));

Но если удалить и вставить заново, то теневое дерево окажется пустым. Как отрисовывать шаблон при повторной вставке на страницу?

Answer 1

[romazhan]

Use cloneNode, it should work:

connectedCallback() {
    return this._shadow.appendChild(this._template.cloneNode(true));
}