Как лучше реализовать подстановку значений в template.content?

Question

[Антон Шаманов]

Решил попробовать для себя новый тег template, но никак не пойму как лучше подставить данные в шаблон?
Кроме того, мой вариант не позволяет задавать атрибуты тегов, но это уже мелочи.

таблица в которую добавляются строки с данными

<table id="tbl">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

шаблон строки

<template id="tpl">
  <tr>
    <td var="name"></td>
    <td var="age"></td>
  </tr>
</template>

код для наполнения таблицы

const rows = [
  {name: 'Anton', age: 30},
  {name: 'Ivan', age: 20}
];
const tpl = document.getElementById('tpl').content;
const tbl = document.querySelector('#tbl tbody');
rows.forEach(function (row) {
  let tplClone = tpl.cloneNode(true);
  tplClone.querySelectorAll('[var]').forEach(function (el) {
    el.innerHTML = row[el.getAttribute('var')] || '';
    el.removeAttribute('var');
  });
  tbl.appendChild(tplClone);
});