Basic Web Component with lit-html

basic-wc-with-lit-html.js

import { html, render } from 'lit-html';

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 = () => html`<div></div>`;

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

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

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

        // other captures
        
        render(this.template(), this);
    }
}

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