What should a native DOM templating API look like?

I don't understand why Svelte isn't even mentioned. Its syntax is more readable for me.

  <div>
    {#each colors as color, i}
      <button
        style="background: {color}"
        aria-label={color}
        aria-current={selected === color}
        onclick={() => selected = color}
      >
        {i + 1}
      </button>
    {/each}
  </div>

I'm somewhat partial to Alpine, which sort of crams it into html.

    <div x-data="{ open: false }">
        <button @click="open = true">Expand</button>
 
        <span x-show="open">
            Content...
        </span>
    </div>

I think you meant to use color in a variable interpolation instead of ”red”. Now the code only makes red buttons.

x-anything is just painful like Angular. UI state is better off being non-declarative, otherwise the builtin behaviors become a limit and unmaintainable workarounds ensue.

Nobody wants to express complex conditions all around the UI when derived state can be handled in a single store.

Author here. I could include Svelte, but honestly it's still like the others: markup with embedded binding expressions and control flow. It would only bolster my claim that popular template syntaxes are similar.

Yeah, you're right.

The code came directly from Svelte's official tutorials. Looks like I accidentally copied the problem instead of the solution!

You can drive an entire Alpine app through a class, which works fine- the class handles all the behavior and the x- tags are mostly wiring up events to methods, and state to visible behavior. But it definitely doesn't take that big an app before you start to get a bit cramped.

I think I'm fond of it because I've never grown to love html-in-js. Sometimes you definitely need that, but for apps that are simple enough that you don't, I find Alpine is just nice to use. No build steps at all, every editor knows how to color html, etc.

It probably shouldn't become a web standard though.

You could get pretty far with a global event handler on the body tag, as most UI events bubble up. Write up an interface for registering sub-handlers from component js files and you get template-behaviour colocation, and any DOM subtree mutation no longer requires event rebinding.