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);

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...

You should use document.importNode() to clone templates.

Template contents are in a separate document from the main document, which is what makes them inert. importNode() adopts the nodes into the document so they have the correct prototype immediately (which includes custom elements). Otherwise the adopt steps are run when the elements are first attached to the document, which adds another tree walk to the insert/append operation that costs some time.

So:

    document.importNode(elem.content, true);

Timelinize, just wow. Been wishing for something like this forever. Love the idea!

Regarding the gpx support... Don't want to lead you astray, but, have you seen https://www.sethoscope.net/heatmap/?

I considered vanilla template initially for building my ActivityPub frontend[1], but in the end the sugar that lit-js adds on top of web components seemed worth the file size overhead.

[1] https://github.com/mariusor/oni

> I use a few libraries (for mapping, datetime

I'm really looking forward to Temporal [0] reaching a larger baseline. Between that and a lot of recent Intl pieces we are so close to not needing libraries for much of anything datetime related.

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

Dude, cool project! I considered building something like this a couple years ago as the only way in hell I'd ever use it is if it's open source and self-hosted (thanks so much for using AGPLv3!). I ended up stuck in analysis paralysis, so I'm super impressed :-)

What's Tabler?

It's almost guaranteed this will be used for unwanted surveillance.