Templated Custom Elements

<ddi-fruits fruits="banana apple orange" selected="apple">
    <template data-name="list">
        <ul class="fruits" data-t="_"></ul>
    </template>
    <template data-name="item">
        <li data-t="data-ddi-selected">
            <a data-t="_ href"></a>
        </li>
    </template>
</ddi-fruits>

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

    class FruitsElement extends TemplatedCustomElement {
        get fruits() {
            return this.getAttribute("fruits")?.split(" ") ?? [];
        }

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

        connectedCallback(): void {
            // TODO: this should work
            // this.append(
            //     this.template(
            //         "list",
            //         {},
            //         this.fruits.map((fruit) => {
            //             return this.template(
            //                 "item",
            //                 {
            //                     dataDdiSelected: fruit === this.selected,
            //                     href: `/${fruit}`,
            //                 },
            //                 fruit,
            //             );
            //         }),
            //     ),
            // );
        }
    }

    customElements.define("ddi-fruits", FruitsElement);
</script>