// Transclusion initializer

​

function Transclucid(root) {

  this.transclude = function(id, template) {

    var y = root.querySelector('yield#' + id);

    y.createShadowRoot().appendChild(template.content.cloneNode(true));

  }

}

​

// MyCard

​

function MyCard() {}

MyCard.prototype = Object.create(HTMLElement.prototype);

MyCard.prototype.createdCallback = function() {

  var template = document.querySelector("#my-card-shadow");

  var root = this.createShadowRoot();

  root.appendChild(template.content.cloneNode(true));

  Transclucid.call(this, root);

}

​

// MyWebKittenCard

​

function MyWebKittenCard() {}

MyWebKittenCard.prototype = Object.create(MyCard.prototype);

MyWebKittenCard.prototype.createdCallback = function() {

  MyCard.prototype.createdCallback.call(this); // super();

  this.transclude('name', document.querySelector('#my-webkitten-name-template'));

  this.transclude('email', document.querySelector('#my-webkitten-email-template'));  

}

​

// Element registrations

document.registerElement('my-card', MyCard);

document.registerElement('my-webkitten-card', MyWebKittenCard);