document.querySelectorAll('template[id]').forEach(({id, content}) => 
  customElements.define(id, class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'}).appendChild(content.cloneNode(true));
      [...this.attributes].forEach(({name, value}) => {
        const span = document.createElement('span');
        this.appendChild(Object.assign(span, {slot: name})).textContent = value;
        this.removeAttribute(name)
        this.shadowRoot.querySelectorAll(`[${name}]`).forEach(el =>
          !el.getAttribute(name) && el.setAttribute(name, value));
      });
    }
  }));