[latent22]

Hey alex-moon one feature you had issues was that HTMX does not process server generated shadow DOM content because it uses the standard old DOM parser. Next point release should have https://github.com/bigskysoftware/htmx/pull/3185 merged hopefully which will allow the use of Document.parseHTMLUnsafe() which is the modern browser replacement that does support this use case but it might go behind a new config flag.

[latent22]

then you may be able to do things like this I think

  <mesh-card id="card-123" hx-swap-oob="true">
    <template shadowrootmode="open">
      <link rel="stylesheet" href="/static/css/components/card.css" />
      <div class="card">
        <div class="card-header">
          <h3>Updated Card Title</h3>
        </div>
        <div class="card-content">
          Updated card description here.
        </div>
        <div class="actions">
          <button type="button">Edit</button>
        </div>
      </div>
    </template>
  </mesh-card>

  class MeshCard extends HTMLElement {
    connectedCallback() {
      if (!this.shadowRoot) {
        const tmpl = this.querySelector('template[shadowrootmode="open"]');
        if (tmpl) {
          this.attachShadow({mode: 'open'})
            .appendChild(tmpl.content.cloneNode(true));
        }
      }
    }
  }

  customElements.define('mesh-card', MeshCard);