Dialog component

gistfile1.txt

import { HTML } from "/modules/light-html/index.js";

class Component extends HTMLElement {
    constructor() {
        super();
        this.hide = this.hide.bind(this);
    }

    hide() {
        this.style.display = "none";
        while (this.firstChild) {
            this.removeChild(this.firstChild);
        }
    }

    show(component) {
        if (this.hasChildNodes()) {
            this.hide();
        }
        this.style.display = "flex";
        this.appendChild(component);
        const close = HTML`<img onclick="${
            this.hide
        }" id="close-dialog" src="images/close.svg" title="close" />`;
        close.render(this);
    }
}

export default Component;