template-element-6.html

<div id="nameTag">Bob</div>
<template id="nameTagTemplate">
<style>
    .outer {
      border: 2px solid brown;
      background: red;
    }
    .name {
      color: black;
    }
</style>
<div class="outer">
  <div class="name">
    Bob
  </div>
</div>
</template>

template-element-6.js

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);