djledda-web/app/util.ts

export function gid(id: string, doc: (Document | ShadowRoot) | undefined) {
    return ((doc ?? document).getElementById(id));
}

export function qs(query: string, sub: (HTMLElement | ShadowRoot) | undefined) {
    return ((sub ?? document).querySelector(query));
}

export function qsa(query: string, sub?: (HTMLElement | ShadowRoot) | undefined) {
    return ((sub ?? document).querySelectorAll(query));
}

export function h<T extends keyof HTMLElementTagNameMap>(
    tag: T,
    opts?: Partial<HTMLElementTagNameMap[T]> | undefined,
    children?: Node[],
) {
    const newEl = Object.assign(document.createElement(tag), opts ?? {});
    if (children) {
        newEl.append(...children);
    }
    return newEl;
}

export function html(strs: TemplateStringsArray, ...vals: string[]) {
    let result = strs[0];
    for (let i = 1; i < strs.length; i++) {
        result += vals[i] + strs[i];
    }
    const template = document.createElement("template");
    template.innerHTML = result;
    return template;
}

export function css(strs: TemplateStringsArray, ...vals: string[]) {
    let result = strs[0];
    for (let i = 1; i < strs.length; i++) {
        result += vals[i] + strs[i];
    }
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(result);
    return sheet;
}

export class DJElement extends HTMLElement {
    static styles: CSSStyleSheet;

    static template: HTMLTemplateElement;

    root: ShadowRoot;

    constructor() {
        super();
        const statics = this.constructor as typeof DJElement;
        this.root = this.attachShadow({ mode: "open" });
        this.root.appendChild(statics.template.content.cloneNode(true));
        this.root.adoptedStyleSheets = statics.styles ? [statics.styles] : [];
    }
}