u/thealjey

When adding interactivity to HTML (via JS, HTMX, etc.), we usually end up connecting elements using selectors.

For example, a simple loading state:

<button 
  hx-get="/data"
  hx-target="#result"
  hx-indicator="#spinner"
>
  Load Data
</button>

<div id="spinner" class="htmx-indicator">
  Loading...
</div>

<div id="result"></div>

• “send a request → put the result in #result”
• “show #spinner while loading”

This works well, but it has some properties:

• selectors are just strings tied to DOM structure
• renaming or moving elements can silently break connections
• each reference resolves to exactly one element

---

I’ve been thinking about a different approach where elements don’t reference each other at all.

Instead, they react to named signals.

Something like this:

<button
  on:click="send"
  on="send"
  get="/data"
  result="response"
  if:loading="spinner"
>
  Load Data
</button>

<div if="spinner" style="display:none;" x-style="display:block;">
  Loading...
</div>

<div render="response"></div>

Instead:

• actions happen (send)
• results exist (response)
• conditions are evaluated (spinner)

---

So instead of wiring elements together directly, everything is coordinated through named identifiers.

This suggests a different way to think about HTML:

• not “connect A to B”
• but “declare what happens, and let the DOM react”

---

Curious what people think:

Does selector-based wiring actually cause problems in practice?

Or is this just a different style without much real benefit?