Custom Elements from Template. Use <slot /> for variables.

custele.js

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));
      });
    }
  }));

index.html

<script defer src="./script.js"></script>

<x-button onclick="console.log('here')" label="Button 1">Click here</x-button>

<x-button onclick="console.log('now')" label="Button 2">Click now!</x-button>

<template id="x-button">
  <style>label { display: block; }</style>
  <label><slot name="label"></slot>
    <button onclick><slot></slot></button>
  </label>
</template>