Templated Custom Elements

<ddi-fruits fruits="banana apple orange" selected="apple"></ddi-fruits>

<script>
    import {
        TemplatedCustomElement,
        registerTag,
        css,
    } from "@dynamic-type/ddi/client";

    import { html, render } from "lit-html";

    const [{ fruits, fruit, selected }, rules] = css`
        .fruits {
            list-style: none;
        }

        .fruit.selected button {
            u: bold;
            color: lime;
        }
    `;

    class FruitsElement extends TemplatedCustomElement {
        static tagName = "ddi-fruits";

        get _fruits() {
            return this.getAttribute("fruits")?.split(" ") ?? [];
        }

        get selected() {
            return this.getAttribute("selected");
        }

        item(_fruit: string) {
            return html`
                <li
                    class="${fruit} ${this.selected === _fruit ? selected : ""}"
                >
                    <button name="${_fruit}" value="${_fruit}">
                        ${_fruit}
                    </button>
                </li>
            `;
        }

        items(items: string[]) {
            return html`
                <ul class="${fruits}">
                    ${items.map((item) => this.item(item))}
                </ul>
            `;
        }

        connectedCallback(): void {
            render(this.items(this._fruits), this);
        }
    }

    registerTag(FruitsElement, rules);
</script>