What should a native DOM templating API look like?

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>

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.

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.