nice

app/util.ts

@@ -0,0 +1,59 @@
+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] : [];
+    }
+}