tagshift
A <template> in, a component class out — one that updates its element in place.
A small JavaScript library that turns a plain HTML <template> into a component
class. An instance holds props and slots; render() builds the element on the
first call and updates that same element on every call after it. No
dependencies, no build step, no virtual DOM — the template is ordinary markup that
sits on the page.
The template knows two things. ${name} placeholders work in text and in
attribute values, and their values go in as text, never parsed as HTML. <slot>s
follow the Shadow DOM rules: a default slot and named ones, with fallback content
that shows until a slot is given something. A slot takes nodes, strings or any
iterable of them, and nodes are moved rather than copied.
Updates are exact rather than diffed. Every placeholder remembers where it lives,
so render() writes only the text nodes and attributes whose result changed, and
a slot is refilled only when its value is no longer the same by Object.is. An
update that throws — content for a slot the template does not declare — leaves
the element as it was. For markup in a slot, an html template tag parses it
into a fragment and escapes every interpolated value.
There are no loops, conditions or event bindings in the template, and nothing
watches your objects: you change props, you call render(). A list is an array
of rendered components handed to a slot.
JavaScript, MIT, with hand-written TypeScript types: npm install tagshift.