t/ts/main.ts

async function main() {
    console.log("Hello, world!");

    const root = new ElemWrapper(document.body);

    const tabGroup = root.add("sl-tab-group");

    tabGroup
        .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
        .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");

    tabGroup
        .add("sl-tab", "slot", "nav", "panel", "tags")
        .add("sl-icon", "name", "tags", "style", "font-size: 20px");
}

function add(name: string, parent: HTMLElement, ...attrs: any[]) {
    const elem = document.createElement(name);
    parent.appendChild(elem);

    for (let i = 0; i < attrs.length; i += 2) {
        elem.setAttribute(attrs[i], attrs[i + 1]);
    }

    return elem;
}

class ElemWrapper {
    constructor(private elem: HTMLElement) {
        this.elem = elem;
    }

    add(name: string, ...attrs: string[]): ElemWrapper {
        const elem = document.createElement(name);
        this.elem.appendChild(elem);

        for (let i = 0; i < attrs.length; i += 2) {
            elem.setAttribute(attrs[i], attrs[i + 1]);
        }

        return new ElemWrapper(elem);
    }
}

document.addEventListener("DOMContentLoaded", main);