<template>: The Content Template element

I'm using the <template> tag heavily in Timelinize[0], which has a fairly sophisticated UI that I'm writing in vanilla JS -- not even jQuery. I use a few libraries (for mapping, datetime, and Bootstrap+Tabler for some nice styles), but that's it.

I wrote some boilerplate JS, yes, but I have complete control over my frontend, and I understand how it works, and I don't need to compile it.

Anyway, it works well so far! The <template> tag is a great way to lay out components and then fill them in with simple JS functions.

One nuance is documented in my code comments:

    // Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#avoiding_documentfragment_pitfalls
    // I spent way too long on this.
    const elem = $(tplSelector);
    if (!elem) return;
    return elem.content.firstElementChild.cloneNode(true);

Once I figured that out, it's been smooth sailing and very powerful.

Oh, but I haven't cleaned up my code at all yet because I was just experimenting/hustling, so it's a bit spaghetti :) If you go looking, don't mind the mess.

---

[0]: https://github.com/timelinize/timelinize - a self-hosted application for bringing together all your data on your own computer and organizing it onto a single timeline: social media accounts, photo libraries, text messages, GPS tracks, browsing history, and more. Almost ready for its debut...