Simple Shadow DOM example with <content> and <template>

gistfile1.js

<section class="info-card">
  John Smith
</section>

<template class="info-car-tmpl">
  <h1>Hello, <content></content>!</h1>
</template>

<script>
  // define our shadow host
  var host = document.querySelector('.info-card');
  // creat out shadow root
  var root = host.createShadowRoot();
  // grab our template
  var template = document.querySelector('.info-card-tmpl');
  // insert our template into our shadow root
  root.appendChild( document.importNode( template.content, true ) );
</script>