←back to thread

<template>: The Content Template element

(developer.mozilla.org)
217 points palmfacehn | 2 comments | 02 Sep 25 17:16 UTC | HN request time: 0s | source
Show context
mvdtnz ◴[02 Sep 25 18:35 UTC] No.45107198[source]▶
Reading the first example I'm not really seeing what gains I get from this. It's just as much work to create a table row using the template as doing it from scratch.
replies(6): >>45107214 #>>45107398 #>>45107429 #>>45107514 #>>45108016 #>>45110197 #
anaisbetts ◴[02 Sep 25 18:53 UTC] No.45107429[source]▶
Of course, the goal of the example is to teach using an example that makes sense logically. Templates can be arbitrarily large and obviously as the template gets bigger, the difference between it and manual `document.createElement` calls gets much larger.
replies(1): >>45113376 #
1. rendaw ◴[03 Sep 25 08:10 UTC] No.45113376[source]▶
The difference in what? TBH I don't get the purpose either. You have to use javascript either way, and it's trivial to do make a shorthand for `document.createElement` that sets properties and adds children... maybe 10 lines per project.

I thought it was an optimization, but benchmarking `document.createElement` was significantly faster (firefox).

And then having `template` in your html means that changes to the template/use are less local.

I feel like this is an improvement that only makes sense if you're neck deep in the react world.

replies(1): >>45118418 #
2. WorldMaker ◴[03 Sep 25 17:31 UTC] No.45118418[source]▶
The React world is still deep in `document.createElement` and doesn't seem to be investing in the template tag any time soon.

I don't know what your benchmarks were exactly, but my benchmarking (also primarily in firefox) shows cloning templates is much faster than `document.createElement` for many tree shapes I was encountering. (Not micro-benchmarks of one element or so at a time, but the tree contents of entire components and "pages" at a time.) That's before learning of a performance tweak I'd missed from reading this thread today (`document.importNode` for template contents cloning to avoid multiple tree walking passes to attach the clone to the document).