JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<my-button click-callback="handleClick">Add Payment method</my-button>

JavaScript

window.handleClick = () => {
alert("Card is added!🤾")
}


class CustomButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', this.handleClick.bind(this));
    
    this.style.cssText = `
        border: 1px solid silver;
        padding: 5px;
        cursor: pointer;
      `;
  }

  handleClick() {
    const clickCallback = this.getAttribute('click-callback');
    console.log(clickCallback);
    if (clickCallback) {
      window[clickCallback]();
    }
  }
}

// Register the custom web component
customElements.define('my-button', CustomButton);