Basic Web Component

basic-web-component.js

export default class ComponentClass extends HTMLElement {
    constructor() {
        super();
        // set sane defaults if desired.
        this._value = null;
    }

    get values() {
        return this._value;
    }

    set values(value) {
        this._value = value;
        this.render();
    }

    connectedCallback() {
        this.template = () => `<div></div>`;

        this.init().then(() => {
            this.render();
        }).catch((e) => {
            // handle errors
        });
    }

    async init() {
        // do fetches etc.
    }

    render() {
        if (!this.template)
            return;

        // other captures
        
        this.innerHTML = this.template();
    }
}

customElements.define("component-name", ComponentClass);