function compileTemplate(templateElement, data){
  //hack to get unencoded symbols from HTML node
  var textarea = document.createElement('textarea');
  textarea.innerHTML = templateElement.innerHTML;

  var text = eval("with(data){html`" + textarea.value + "`}");

  var tmpElement = document.createElement('div');

  tmpElement.innerHTML = text;

  var fragment = document.createDocumentFragment();

  while (tmpElement.childNodes.length > 0) {
      fragment.appendChild(tmpElement.childNodes[0]);
  }

  function html(literals, ...substs) {
    return literals.raw.reduce((acc, lit, i) => {
        let subst = substs[i-1];
        if (Array.isArray(subst)) {
            subst = subst.join('');
        }
        if (acc.endsWith('$')) {
            subst = htmlEscape(subst);
            acc = acc.slice(0, -1);
        }
        return acc + subst + lit;
    });
  }

  function htmlEscape(str) {
    return str.replace(/&/g, '&') // first!
      .replace(/>/g, '>')
      .replace(/</g, '<')
      .replace(/"/g, '"')
      .replace(/'/g, '&#39;')
      .replace(/`/g, '&#96;');
  }

  return fragment;
}