Custom Elements

[bennypowers]

This looks like a perfect example of a web components use case. Instead of creating a Game class and having it "mount" on some div in the DOM, what about having something like this:

class Game extends HTMLElement {
  static template = document.createElement('template');
  static {
    this.template.innerHTML = `
      <p>game DOM here</p>
      <canvas></canvas>
    `;
  }

  constructor() {
    super();
    // create private Shadow DOM for the game
    this.attachShadow({ mode: 'open' })
      // efficiently clone game DOM
      .append(Game.template.content.cloneNode(true));
  }
  
  connectedCallback() {
    // initialize game...
  }
}

customElements.define('rose-game', Game);

Then in your page HTML

<rose-game></rose-game>

etc etc

You could also use a web components framework (I recommend Lit) to help with dynamic updates. You don't need a build step to do this, you can load Lit as es modules from a CDN.

I'm available to pair on this if you're interested in learning more

Originally posted by @bennypowers in https://github.com/RedHat-Israel/ROSE/pull/475#pullrequestreview-1610239662