Basic funtional approach of websomponents

index.html

<meta charset=utf8>
<script src=https://cdn.rawgit.com/chjj/marked/8f9d0b72/marked.min.js></script>


<main>
  <h1>Welcome</h1>
  <div>
    ${x_avatar(this.username, 'https://framagit.org/vinyll')}
  </div>

  <article>
    ${x_article('Fries are cold', '### Why?\nNo reason but they **are**, even in _Markdown_!')}
  </article>

  <p>${x_clock()}</p>
</main>


<script>
function literal(template, data) {
  const func = new Function(`return \`${template}\``)
  return func.call(data)
}

function x_avatar(name, link) {
  return `
    <h3>${name}</h3>
    <small><a href=${link} target=_blank>my profile</a></small>
  `
}

function x_article(title, content) {
  return `
    <h2>${title}</h2>
    ${marked(content)}
  `
}

function x_clock() {
  return `
    Updated at ${(new Date()).toTimeString()}
  `
}

const template = document.querySelector('main').innerHTML
function update() {
  document.querySelector('main').innerHTML = literal(template, {
    username: 'George'
  })
}
update()  // Intial call

// Refresh the template
setInterval(_ => {
  update()
}, 1000)
</script>