The implementation of the native components makes them slow

[gauravgautamgoldcast]

As you can see I can speed up the creation time to much higher than any of the frameworks listed in the native implementation by just changing the crate function like this

_render() {
        if (!this.$listContainer) return;
        const innerHtml = '';
        for (let i = 0; i < this._list.length; i++) {
          const item = this._list[i];
          innerHTML += `<todo-item ${item.checked ? 'checked' : ''} text="${item.text}" index=${i}></todo-item>`
        }
        this.$listContainer.innerHTML = innerHTML;

        /*
        // empty the list
        this.$listContainer.innerHTML = '';
        this._list.forEach((item, index) => {
            let $item = document.createElement('todo-item');
            $item.setAttribute('text', item.text);
            $item.checked = item.checked;
            $item.index = index;
            $item.addEventListener('onRemove', this.removeItem.bind(this));
            $item.addEventListener('onToggle', this.toggleItem.bind(this));
            this.$listContainer.appendChild($item);
        });
        */
    }
    ```
    
    Note that while I have removed the listeners here they can just be added as delegate listeners on the `my-todo` component so they don't take up so much resources. Also note that collpasing the loading of js into one file also improves load time:
    
    ```
        <!--
      <script src="./js/my-todo.js"></script>
      <script src="./js/todo-item.js"></script>
      <script src="./js/todo-input.js"></script>
    -->
    <script src="./js/main.js"></script>
    ```
    
    Additionally, we can make this even faster if we just do some simple partial updates to the list instead of recreating all the todo items each time.