custom-button-1.html

<custom-button backgroundColor="red"></custom-button>

<script>
  const template = `
    <style>
      button {
        background-color: blue;
        color: #fff;
      }
    </style>
    <button>Click</button>
  `;

  function str2DOM(str) {
    return document.createRange().createContextualFragment(str);
  }

  class CustomButton extends HTMLElement {
    constructor() {
      super();

      this.appendChild(str2DOM(template));

      this.querySelector('button').style.backgroundColor =
        this.getAttribute('backgroundColor');
    }
  }

  window.customElements.define('custom-button', CustomButton);
</script>