Web component using slots

HTML

<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/3b3bd26f/webcomponents-lite.js"></script>
<my-components>
    <p slot="header">
      header 1
    </p>
    <p slot="header">
      header 2
    </p>
    <p slot="foobar">
      foobar
    </p>
     <p slot="footer">
      footer 2
    </p>
     <p slot="footer">
      footer 1
    </p>
</my-components>

JavaScript

customElements.define('my-components', class extends HTMLElement {
  constructor() {
  	super()
    var root = this.attachShadow({mode: 'open'});
    root.innerHTML = [
      '<slot name="header"></slot>',
      '<slot name="footer"></slot>'
    ].join('')
  }
});