You're just missing two things. First, install Lit. Then write it as:

const el = html`<p>Hello, world!</p>`

And you're done. These are called "tagged template literals[0]". Lit gives you the html "tag" for the literal that you're looking for.

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

1) that’s not JSX, it just looks like it

2) it’s still an external library, which is OPs point

I don't think Lit counts as a framework. It's much lower-level plumbing. And tagged template literals are part of the browser.

But lit's DSL isn't a part of the browser. Neither is lit's data binding/reactivity. Nor lit's rules on directives. Nor lit's tasks. Nor lit's context. Nor...

Yes, I would agree with that. And that's why "running natively in the browser" is not a remarkable feature of web components, because you will need something like lit anyway for using web components in a productive way. So you might as well use React, or any of the other billion frameworks.

Both are non-standard DSLs that need an external library to work

It seems the problem here is not the browser, but your lack of knowledge.