template-element-8.html

<!-- add dependencies -->
<link rel="import" href="./dependent-element.html">
<!-- web component template -->
<template id="nameTagTemplate">
<style>
    .outer {
      border: 2px solid brown;
      background: red;
    }
    .name {
      color: black;
    }
</style>
<div class="outer">
  <div class="name">
    Bob
  </div>
  <dependent-element></dependent-element>
</div>
</template>
<!-- web component class -->
<script>
class NameTag extends HTMLElement {
...
    const shadowRoot = this.attachShadow({mode: 'open'});
    const template = document.querySelector('#nameTagTemplate');
    const clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
...
}
customElements.define('name-tag', NameTag);
</script>