Shadow DOM

by Julien Etienne

HTML

<div id="nameTag">
Bob</div>

<template id="nameTagTemplate">
<style>
.outer {
  border: 2px solid brown;
  border-radius: 1em;
  background: red;
  font-size: 20pt;
  width: 12em;
  height: 7em;
  text-align: center;
}
.boilerplate {
  color: white;
  font-family: sans-serif;
  padding: 0.5em;
}
.name {
  color: black;
  background: white;
  font-family: "Marker Felt", cursive;
  font-size: 45pt;
  padding-top: 0.2em;
}
</style>
<div class="outer">
  <div class="boilerplate">
    Hi! My name is
  </div>
  <div class="name">
    Bob
  </div>
</div>
</template>

JavaScript

var nameTag = document.querySelector('#nameTag');
var shadow = document.querySelector('#nameTag').attachShadow({mode: 'open'});
console.log('shadow', shadow)
console.log(nameTag)
var template = document.querySelector('#nameTagTemplate');
shadow.innerHTML = template.innerHTML;