function getTemplateClone(templateSelector) {

  var template = document.querySelector(templateSelector);

  var clone = document.importNode(template.content, true);

  //var els = [].slice.call(clone.children);

  return clone;

}

​

function generateComponent(elementName, tagName, templateSelector, postCreateCallback) {

  var elementPrototype = Object.create(HTMLElement.prototype);

  elementPrototype.createdCallback = function(a) {

    var shadow = this.createShadowRoot();

​

    var clone = getTemplateClone(templateSelector);

    shadow.appendChild(clone);

    if (postCreateCallback) { postCreateCallback(shadow, this); }

  };

  window[elementName] = document.registerElement(tagName, {prototype: elementPrototype});

}

​

function slotting(shadow, scope) {

  var slotElements = [].slice.call(shadow.querySelectorAll('slot'));

  var children = [].slice.call(scope.childNodes);

  var slots = {};

  slotElements.forEach(function (el) {

    var name = el.getAttribute('name') || '__default';

    slots[name] = {root: el, fragment: document.createDocumentFragment()};

  });

  children.forEach(function (el) {

    var slotName = '__default';

    if (el.nodeType !== 1) {

      slots.__default.fragment.appendChild(el);

    } else {

      slotName = el.getAttribute('slot') || '__default';

      if (slotName in slots) {

        slots[slotName].fragment.appendChild(el);

      }

    }

  });

  for (var slotName in slots) {

   var slot =  slots[slotName].root;

    slot.parentNode.replaceChild( slots[slotName].fragment, slot);

  }

}

​

generateComponent('PieShopElement', 'pie-shop', '#pie-shop-template', slotting);