JSFiddle - React, Tailwind, and code Playground

by melihsahin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Buton Bileşen</title>
</head>
<body>
  <h1>Buton Bileşeni</h1>
  <custom-button>Tıkla</custom-button>
  <script src="button.js"></script>
</body>
</html>

JavaScript

class CustomButton extends HTMLElement {
    constructor() {
        super();
        //shadow DOM eklenir
        this.attachShadow({
            mode: 'open'
        });

        // tıklama event'i eklenir
        this.addEventListener('click', this.handleClick.bind(this));
    }

    // Butona tıklanınca tetiklenecek fonksiyon tanımlanır
    handleClick() {
        alert('Button tıklandı!');
    }

    connectedCallback() {
        // render olacak bileşen oluşturulur
        this.shadowRoot.innerHTML = `
     <style>
      .custom-button {
       padding: 10px 20px;
       background-color: #007bff;
       color: #fff;
       border: none;
       border-radius: 5px;
        cursor: pointer;
      }
      .custom-button:hover {
       background-color: #0056b3;
       }
      </style>
    <button class="custom-button"><slot></slot></button>`;
    }
}
// bileşen tanımlanır
customElements.define('custom-button', CustomButton);