[Zecc]

Compare

    class Item extends EventTarget {

        #checkbox = <input type='checkbox' /> as HTMLInputElement;
        li;

        constructor(private list: List, text: string) {
            super();
            this.li = (
              <li class='item'>
                {this.#checkbox}
                <span onclick={() => this.toggle()}>{text}</span>
                <button class='close' onclick={() => this.remove()}></button>
              </li> as HTMLLIElement
            );
            this.#checkbox.onclick = () => this.toggle();
        }
    }
    

with

    class Item extends EventTarget {

        #checkbox;
        li;
        
        constructor(private list: List, text: string) {
            this.#checkbox = createElement('input');
            this.#checkbox.setAttribute('type', 'checkbox');
            
            this.li = document.createElement('li');
            this.li.className = 'item';
            this.li.appendChild(this.#checkbox);

            const span = document.createElement('span');
            span.onclick = (() => this.toggle());
            span.textContent = text;
            this.li.appendChild(span);

            const button = document.createElement('button');
            button.className = 'close';
            button.onclick = (() => this.remove());
            this.li.appendChild(button);
        }
    }
    

Of course you can create helper functions to avoid all the `createElement`s followed by `setAttribute`s. As mentioned elsewhere you can even used tagged strings. But doing things "manually" is painful.