custom-button.js

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

          const shadow = this.attachShadow({ mode: "open" });

          const template = `
            <style>
                .custom-button {
                    padding: 10px 20px;
                    border: none;
                    border-radius: 4px;
                    background-color: #007bff;
                    color: white;
                    font-family: Arial, sans-serif;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }
                
                .custom-button:hover {
                    background-color: #0056b3;
                }
                
                .custom-button:active {
                    transform: scale(0.98);
                }
            </style>
            <button class="custom-button">
                <slot></slot>
            </button>
        `;

          shadow.innerHTML = template;

          this.button = shadow.querySelector("button");
          this.button.addEventListener("click", () => {
            this.dispatchEvent(new CustomEvent("button-click"));
          });
        }

        static get observedAttributes() {
          return ["disabled"];
        }

        attributeChangedCallback(name, oldValue, newValue) {
          if (name === "disabled") {
            this.button.disabled = newValue !== null;
          }
        }
      }

      customElements.define("custom-button", CustomButton);