document.addEventListener('DOMContentLoaded', () => {
  const createCustomElement = content => class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'}).appendChild(content.cloneNode(true));
      [...this.attributes].forEach(({name, value}) => this.appendChild(
        Object.assign(document.createElement('span'), {slot: name})
      ).textContent = value);
    }
  };
  document.querySelectorAll('template[id]').forEach(({id, content}) => 
    customElements.define(id, createCustomElement(content)));
});