Playing with native web components

Tested on chrome 36

HTML

<template id="my-component-template">
  <div style="width:100%; height: 100%">
    <slot name="a"></slot>
    <slot name="b"></slot>
    <slot name="c"></slot>
  </div>
</template>

<my-component>
  <div slot="a">DivA</div>
  <div slot="b">DivB</div>
  <div slot="c">DivC</div>
</my-component>

JavaScript

class MyComponent extends HTMLElement{
	constructor() {
  	super();
    
    let template = document.querySelector('#my-component-template');
    let shadowRoot = this.attachShadow({ mode: 'open' });
    let clone = template.content.cloneNode(true);
    
    shadowRoot.appendChild(clone);
    
    let div = document.createElement("div");
    div.innerHTML="DivD";
    div.slot = "d";
    this.appendChild(div);
    
    let slot = document.createElement("slot");
    slot.name = "d";
    shadowRoot.appendChild(slot);
    
  }
}

customElements.define('my-component', MyComponent);