Giriş: Framework Bağımsız Mimari

2026'da artık monolitik tek framework uygulamaları yerine çoklu framework mimarileri tercih ediliyor. Web Components standardı, bu karma ekosistemde ortak ve uzun ömürlü bir köprü görevi görmektedir.

1. Vanilla Web Component

// components/payment-widget.ts

class PaymentWidget extends HTMLElement {
  private shadow: ShadowRoot;
  private amount: number = 0;
  private selectedMethod: string = 'card';

  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['amount', 'currency'];
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    if (newValue === oldValue) return;
    
    if (name === 'amount') {
      this.amount = parseFloat(newValue || '0');
      this.render();
    }
  }

  connectedCallback() {
    this.render();
    this.attachEventListeners();
  }

  private render() {
    this.shadow.innerHTML = `
      <style>
        :host {
          --primary: #3b82f6;
        }
        .payment-widget {
          max-width: 400px;
          padding: 1.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
        }
        .amount-display {
          font-size: 2rem;
          font-weight: 700;
          color: var(--primary);
          text-align: center;
          margin: 1rem 0;
        }
        .method-selector {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 0.75rem;
          margin-bottom: 1.5rem;
        }
        .method-button {
          padding: 0.75rem;
          border: 2px solid #e5e7eb;
          background: white;
          cursor: pointer;
          border-radius: 0.375rem;
          transition: all 0.2s;
        }
        .method-button.active {
          border-color: var(--primary);
          background: var(--primary);
          color: white;
        }
      </style>

      <div class="payment-widget">
        <div class="amount-display">
          ${this.formatCurrency(this.amount)}
        </div>
        <div class="method-selector">
          <button class="method-button" data-method="card">
            💳 Kart
          </button>
          <button class="method-button" data-method="bank_transfer">
            🏦 Transfer
          </button>
          <button class="method-button" data-method="crypto">
            ₿ Kripto
          </button>
        </div>
        <button type="button" class="submit-button" id="submitBtn">
          Ödemeyi Tamamla
        </button>
      </div>
    `;
  }

  private attachEventListeners() {
    const buttons = this.shadow.querySelectorAll('[data-method]');
    buttons.forEach((button) => {
      button.addEventListener('click', (e) => {
        buttons.forEach((b) => b.classList.remove('active'));
        (e.target as HTMLElement).classList.add('active');
        this.selectedMethod = (e.target as HTMLElement).dataset.method || 'card';
      });
    });

    const submitBtn = this.shadow.querySelector('#submitBtn');
    submitBtn?.addEventListener('click', () => {
      this.dispatchEvent(
        new CustomEvent('payment-success', {
          bubbles: true,
          composed: true,
          detail: { amount: this.amount, method: this.selectedMethod, transactionId: 'TX-' + Date.now() },
        })
      );
    });
  }

  private formatCurrency(amount: number): string {
    return new Intl.NumberFormat('tr-TR', {
      style: 'currency',
      currency: 'TRY',
    }).format(amount);
  }
}

customElements.define('payment-widget', PaymentWidget);

2. React'te Web Component (Attributes vs Properties)

React 19'de Web Components'lar daha iyi destekleniyor, ancak attributes her zaman string olduğunun farkında olmak kritik:

// components/CheckoutPage.tsx
'use client';

import { useEffect, useRef } from 'react';
import '@/components/payment-widget';

export function CheckoutPage() {
  const widgetRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const widget = widgetRef.current;
    if (!widget) return;

    const handleSuccess = (e: Event) => {
      const customEvent = e as CustomEvent;
      console.log('Payment success:', customEvent.detail);
      alert('Ödeme başarılı!');
    };

    widget.addEventListener('payment-success', handleSuccess);
    return () => widget.removeEventListener('payment-success', handleSuccess);
  }, []);

  return (
    <div className="checkout-container">
      <h1>Ödeme Sayfası</h1>
      {/* 
        ✅ DÜZELTME 1: Attributes string olarak gönder
        ❌ YANLIŞ: <payment-widget amount={299.99} />
        ✅ DOĞRU: <payment-widget amount="299.99" />
      */}
      <payment-widget
        ref={widgetRef}
        amount="299.99"
        currency="TRY"
      />
    </div>
  );
}

// ✅ DÜZELTME 2: Eğer number property gerekiyorsa useEffect'te set et
export function CheckoutPageWithProperty() {
  const widgetRef = useRef<any>(null);

  useEffect(() => {
    if (widgetRef.current) {
      // Property setter kullan (attribute değil)
      widgetRef.current.amount = 299.99;  // JavaScript property
    }
  }, []);

  return (
    <div className="checkout-container">
      <payment-widget ref={widgetRef} currency="TRY" />
    </div>
  );
}

3. Vue'de Web Component

<template>
  <div class="checkout-vue">
    <h1>Vue'da Ödeme</h1>
    <!-- ✅ Vue'da custom events native olarak çalışır -->
    <payment-widget
      :amount="`${amount}`"
      currency="TRY"
      @payment-success="handleSuccess"
    />
    <div v-if="message" class="message">
      {{ message }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import '@/components/payment-widget';

const amount = ref(299.99);
const message = ref('');

const handleSuccess = (event: CustomEvent) => {
  message.value = `✅ Ödeme başarılı: ${event.detail.transactionId}`;
};
</script>

<style scoped>
.message {
  margin-top: 1rem;
  padding: 1rem;
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
}
</style>

4. Web Components Best Practices

Attributes vs Properties: HTML attributes her zaman string'dir. Sayısal değerler için property setter'ları kullan veya string gönder.
Shadow DOM Encapsulation: Global CSS çakışmalarını tamamen önler.
Custom Events: Shadow DOM sınırını aşması için bubbles: true ve composed: true mutlaka gereklidir.
Framework Agnostic: Tek bir bileşeni React, Vue, Svelte ve Astro'da sorunsuz kullanabilirsiniz.

Özet

Web Components ile bir kez yazıp tüm framework'lerde sıfır uyum problemiyle çalışan uzun ömürlü UI mimarileri kurabilirsiniz. Attributes-properties farkına dikkat!