Recognizing that Stackoverflow may not be the most appropriate place to ask, I figure folks here may have insights.

I want to render web (HTML) components using pure Javascript, but I haven’t been able to find anything close. The myriad “tailwind”, “bootstrap” clones all seem to want to bake display logic into HTML:

<div class="some indecipherable and incomprehensively long list of css classes which do magic things">

The alternative seems to be something like React, which has you writing HTML tags as strings:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

This is “fine”, but every React framework I’ve seen both requires significant learning, and seems hyper-bloated.

I want neither. I want to do something like this:

const modal = new Modal();
modal.text = 'Foobar';
modal.buttons = Button.OKCANCEL;
const result = modal.show();

Now this may create (will) create some html elements in the current DOM so the browser can render them, and it may add indecipherable CSS classes to those elements, but I don’t want to have to know or care what it’s doing. I assume it’s going to create reactive elements, that work across browser etc.

I can unit test this, without having to do anything crazy like pixel-test generated screenshots etc. I assume if the javascript is written properly, it will render properly, so I only need to test the js code.

It’s a mystery to me how people unit test apps built with these HTML UI “libraries” which are really just a collection of css classes.

Now I could create my own javascript classes, which just document.createElements a set of Bootstrap/Tailwind/etc HTML elements with the correct css classes, but why doesn’t this already exist?

Or does it, and I just didn’t RTFM?

Am I crazy?