example-lib.js

<script>
  // Base.js
  class OurBaseComponent extends HTMLElement {
    connectedCallback() {
      this.doRender();
    }

    createState(obj) {
        return Object.keys(obj).reduce((prev, key) => {
            // This introduces bugs
            prev["_" + key] = obj[key];
            prev[key] = {
                get: () => prev["_" + key],
                set: (val) => this.changeData(() => prev["_" + key] = val);
            }
        }, {})
    }
    
    changeData(callback) {
      callback();
      this.clear();
      this.doRender();
    }

    clear() {
      for (const child of this.children) {
        child.remove();
      }
    }
    
    doRender(callback) {
      this.clear();
      callback();
    }    
  }
</script>






<script>
  // MainFile.js
  class MyComponent extends OurBaseComponent {
    state = createState({todos: []});

    render() {
        this.doRender(() => {
            this.innerHTML = `<h1>You have ${this.state.todos.length} todos</h1>`
        })
    }
  }

  customElements.define('my-component', MyComponent);
</script>