
Hypertext Literal - jashkenas
https://observablehq.com/@observablehq/htl
======
mbostock
We created Hypertext Literal because we wanted a convenient (and safe!) way to
create DOM from JavaScript, and nothing more. As the post explains, we were
inspired by lit-html, but felt we could simplify (and optimize) by focusing on
creation rather than dynamic updates.

~~~
couchand
Hi Mike, this looks neat! In the linked document you mention that in addition
to lit-html it's also inspired by HTM. Briefly looking at the readme for that
project, it does look quite similar. Could you clarify what features/design
decisions in HTL distinguish it from HTM?

~~~
mbostock
Thanks! This is covered at the end of the post, but I can elaborate a bit
here.

HTM mirrors JSX syntax, which means it requires closing tags for every
element. We wanted HTML5 syntax instead, which means our parser needs to
handle void elements and missing close tags, and a variety of other edge cases
(such as “bogus” comments) whose behavior is defined by the HTML5
specification.

Another important feature for us is contextual namespaces. If you have a G
element within HTML, it’s an unknown element, but within SVG it’s a group
element. HTM (and JSX, HyperScript, and similar approaches) build the DOM from
leaves up, so at the time you create the element, you don’t know what the
parent is and thus can’t infer the appropriate namespace. That’s fixable by
changing what HTM passes to the “pragma”, but it would require changing the
signature.

~~~
mhd
That's a pretty good selling point. I always was quite disappointed that after
years and years of finding more writable alternatives to the verbosity of
HTML, we picked up the worst version of it (from a writing-as-a-human
perspective). That always bothered me way more than mixing markup and code.

HTML5 by comparison ain't that bad and it's the language you'd also be using
when writing things manually. So I appreciate the effort. Pairing that with
preact might be a good toy project.

