2011'de ilk konuşulduğunda çerçeve savaşları yaratacağı söylenen Web Bileşenleri, uzun bir olgunlaşma sürecinin ardından sessiz sedasız her yere yayıldı. Bugün bir video oynatıcı, sohbet balonu ya da tarih seçici kullanıyorsanız arka planda büyük ihtimalle custom element var. Peki çerçevesiz bir arayüz katmanı 2026'da gerçekten mantıklı mı? Cevap, projenin yaşam süresine ve kimlere dağıtılacağına bağlı; ama söylem artık eskisinden çok daha olumlu.

Üç Yapı Taşı

Web Bileşenleri üç standart üzerine kurulur: custom elementler, shadow DOM ve şablonlar. Bir öğeyi tanımlamak için gereken kod şaşırtıcı derecede kısa:

class SayacKarti extends HTMLElement {
  connectedCallback() {
    const kok = this.attachShadow({ mode: "open" });
    kok.innerHTML = `
      <button>-</button> <span>0</span> <button>+</button>
    `;
    let sayi = 0;
    const [eksi, arti] = kok.querySelectorAll("button");
    const ekran = kok.querySelector("span");
    eksi.onclick = () => (ekran.textContent = String(--sayi));
    arti.onclick = () => (ekran.textContent = String(++sayi));
  }
}
customElements.define("sayac-karti", SayacKarti);

Elementin yaşam döngüsü yöntemleri işin omurgasıdır: connectedCallback DOM'a eklendiğinde, disconnectedCallback söküldüğünde, attributeChangedCallback ise öznitelik değiştiğinde çalışır. Shadow DOM ise stil izolasyonunu bedavaya verir: bileşenin içindeki CSS dışarıya, dışarıdaki CSS içeriye sızamaz. Bu, tasarım sistemlerinin en eski kabusu olan "bir yerde değişti, kırk yerde bozuldu" sorununu kökten çözer.

Çerçevelerle Birlikte Yaşamak

Gerçekçi olmak gerekirse çoğu ekip uygulamayı React ya da Vue ile yazmaya devam edecek. İyi haber, Web Bileşenleri buna karşı değil, onun için. Çerçeveden bağımsız bir tasarım sistemi katmanı kurup kartları, modalları ve form alanlarını native element olarak dağıtmak; mikro ön uç mimarilerinde ve büyük kurumsal monolorelarda tek gerçek ortak payda olmaya devam ediyor. React 19'un custom elementleri doğal özelliklerle geçirebilmesi, Vue'nun defineCustomElement derleyicisi ve Lit'in sunduğu ince temel sınıf bu uzlaşıyı kolaylaştırıyor. Aynı bileşen setinin hem pazarlama sitesinde hem Angular ile yazılmış yönetim panelinde kullanılabildiği bir dünya, ekipler arası tekrarı da bitirir.

Dağıtım tarafı da artık olgun: bir bileşen setini tek JavaScript dosyası olarak yayınladığınızda alıcı taraf herhangi bir çerçeveye bağımlı olmadan onu kullanır. Bu, kütüphane yazarları için destek yükünün ciddi ölçüde azaldığı anlamına gelir; "React sürümünüz hangisi?" sorusu tarihe karışır, çünkü element tarayıcının kendi sözleşmesiyle konuşur.

Nerede Değil, Nerede?

Form ağırlıklı, sık state geçişli bir panoyu yalın JavaScript ile yazmak hâlâ zor; bu senaryoda çerçeve reaktiflik işini sizin yerinize çok daha iyi yapar. Ama dağıtılacak bir bileşen seti, iframe'den daha hafif bir üçüncü parti widget ya da on yıl yaşayacak bir kurumsal tasarım sistemi için Web Bileşenleri tarayıcının sunduğu en sağlam zemin. Ayrıca tasarım ekiplerinin "bileşen kütüphanesi" talebi, platformun kendi bileşen modeliyle karşılandığında bağımlılık bütçeniz görünür şekilde küçülür. Çerçeve modası on yılda iki kez değişir; platformun kendi API'leri ise geriye dönük uyumluluk sözü verir. Doğru karar, ikisini doğru katmanda birleştirmektir.