Custom Elements - using templates & shadow DOM

gistfile1.js

<template id="x-template">
  <style>
    h1 { color: #bada55; }
  </style>
  <h1>What you are reading came from a template and is part of a custom elements shadow DOM</h1>
</template>

var proto = document.create(HTMLElement.prototype, {
  proto.createdCallback : {
    value : function() {
      var template = document.querySelector('#x-template');
      var clone = document.importNode(template.content, true);
      this.createShadowRoot().appendChild(clone);
      console.log('createdCallback fired');
    }
  }
});

document.registerElement('x-element', {prototype : proto});
document.body.appendChild(document.createElement('x-element'));