Custom Element Oluşturma

class extends HTMLElement ve connectedCallback.

Web Components, tarayıcıda kapsüllenmiş UI bileşenleri yaratmamızı sağlar.

Shadow DOM: Stil ve DOM izolasyonu.
Custom Elements: customElements.define() ile tanımlanır.
HTML Templates: <template> içerik tanımlaması.

Simple Custom Element

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'card');
    wrapper.innerHTML = `
      <style>
        .card { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }
      </style>
      <slot></slot>
    `;
    shadow.appendChild(wrapper);
  }
}
customElements.define('my-card', MyCard);

Using the Custom Element

<my-card>
  <h3>Kart Başlığı</h3>
  <p>Kart içeriği burada.</p>
</my-card>