CustomElement WebComponent Template

MyCustomElement.js

class MyCustomElement extends HTMLElement {
    constructor(){
        super();
    }

    static get observedAttributes() {
        return [];
    }

    // Life Cycle
    attributeChangedCallback(name, oldVal, newVal) {
        console.log("Changed: " + name + " old: " + oldVal + " new: " + newVal);
    }

    connectedCallback() {
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(this.template.content.cloneNode(true));
    }

    get template() {
        if (this._template) {return this._template;}

        this._template = document.createElement('template');
        let styles = document.createElement('style');
        let content = document.createElement('div');
        let imports = document.createElement('head');

        imports.innerHTML = `
        `;

        styles.innerHTML = `
        `;

        content.innerHTML = `
        `;


        this._template.content.appendChild(styles);
        this._template.content.appendChild(imports);
        this._template.content.appendChild(content);
        return this._template;
    }
}

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