Try a new idea. Simplified, single files.

[crisdosaygo]

class Comonent extends Whatever {
  constructor(MyStuff) {
    // set up my stuff
    this.stuff = MyStuff
  }

  get myGuyState() {
    return this.stuff.guyState;
  }

  render() {
    this.shadow.innerHTML = `
      <style>
 
      </style>
      <h1 onclick=doStuff(event);>Some stuff</h1>
      <p>${MyStuff}</p>

      <my-other-guy state=myGuyState></my-other-guy>

      <script>
        function doStuff() {

        }
      </script>
    `;
  }

}

As in, how can we make it idiomatic and as simple as possible???

What about adding event handlers?