class KatexExpressionShim extends HTMLElement {
    static observedAttributes = ["expression", "katex-options"];
    targetSpan;

    constructor() {
        super();
    }

    doRender() {
        if (!this.targetSpan) return;

        const options = this.hasAttribute("katex-options") ?
            this.getAttribute("katex-options") : {};
        katex.render(
            this.getAttribute("expression"),
            this.targetSpan,
            JSON.parse(options)
        );
    }

    connectedCallback() {
        this.targetSpan = document.createElement('span');
        this.appendChild(this.targetSpan);
        this.doRender();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        this.doRender();
    }
}
customElements.define("katex-expression", KatexExpressionShim);