HTTP Archive Web Almanac 2025 verisine göre dünyadaki en çok ziyaret edilen 11 milyon site içinde Custom Elements kullanım oranı %20’yi aşarken, State of CSS 2025 anketinde geliştiricilerin %44’ü “framework-bağımsız bileşen kütüphanesi” stratejisini kurumsal yol haritalarının üst sırasına aldığını bildirdi. 2026’da Lit, GitHub’da 22.000+ star ve Adobe Spectrum, GitHub Primer, SAP UI5 gibi devasa design system’lerin altyapısı olarak konumlanmış durumda. Yanlış kurgulanan bir custom element yığını ise ilk paint’te 90 KB’a varan gereksiz boyutla gelir ve Core Web Vitals üzerinde negatif bir iz bırakır.
Bu rehberde Web Components dört standardının üretim haritasını, Lit’in reaktif modelini, Shadow DOM kapsüllemesini, declarative shadow DOM ile SSR akışını, framework interop topolojisini, Stencil/FAST/Hybrids alternatiflerini ve GitHub Primer, Adobe Spectrum, SAP UI5 vakalarından çıkarılan ROI verilerini ele alıyoruz.
Web Components: Dört Standardın Anatomisi
Web Components, tarayıcının native desteklediği dört standardın orkestrasyonudur: Custom Elements, Shadow DOM, HTML Templates ve ES Modules. MDN Web Components dokümantasyonu, bu dört API’nin W3C/WHATWG tarafından standartlaştırıldığını ve tarayıcı motorları içine gömüldüğünü vurgular. Standartlaşma şu pratik sonucu doğurur: bir Web Component, React 19, Vue 3.5, Angular 18, Svelte 5 veya saf HTML sayfasında değişikliksiz çalışır. Bağımlılık yığını eklemeden, runtime indirmeden, build adımı çalıştırmadan çalışan tek frontend bileşen modelidir. Dört standardın her biri spesifik bir sorumluluğa sahiptir; bu ayrışma Web Components’ı framework benzeri “abstraction tower” yapılardan ayırır.
| Standart | Sorumluluk | Tarayıcı API’si | İlgili Şart | 2026 Destek |
|---|---|---|---|---|
| Custom Elements | Yeni HTML element tanımı | customElements.define() | Tag adında tire (“-“) zorunlu | Tüm modern tarayıcılar |
| Shadow DOM | Stil ve DOM yalıtımı | element.attachShadow() | open/closed mode seçimi | Tüm modern tarayıcılar |
| HTML Templates | Inert markup parçası | ve | document.importNode | Tüm modern tarayıcılar |
| ES Modules | Bileşen dağıtım birimi | import/export native | Browser MIME zorunluluğu | Tüm modern tarayıcılar |
| Declarative Shadow DOM | SSR uyumlu shadow tree | HTML parser seviyesi | Chrome 90+, Safari 16.4+, FF 123+ |
- Custom Element tanımı: customElements.define(‘my-button’, class extends HTMLElement {…}) ile native HTMLElement türetilir.
- Shadow DOM eklenmesi: attachShadow({mode: ‘open’}) ile bileşene encapsulated bir DOM ağacı bağlanır.
- Template kullanımı: etiketi parse edilir ama render edilmez; cloneNode ile instans üretilir.
- ESM ile dağıtım: Bileşen import statement’ı ile yüklenir, otomatik tree-shake ve lazy import desteklenir.
[https://omeronal.com/wp-content/uploads/2026/05/web-components-lit-framework-bagimsiz-v2-inline-1.webp]
Lit: Web Components’ın Reaktif Hızlandırıcısı
Google Chrome ekibinin sponsor olduğu Lit, Web Components üzerine ince bir reaktif katman ekleyen 6 KB’lık bir kütüphanedir. Lit resmi dokümantasyonu, projeyi “fast, lightweight web components” olarak konumlandırır. Lit 3.2 (2025) ile birlikte SSR ve hydration üretim için stabilize edildi, @lit-labs/ssr paketi declarative shadow DOM üzerinden render eder. GitHub üzerinde 18.000+ star, npm üzerinde haftalık 1.2 milyon download’a ulaşan Lit, design system topluluğunda fiili standart konumundadır. Adobe Spectrum, GitHub Primer ve SAP UI5 Web Components dahil olmak üzere üst sıradaki kurumsal design system’lerin tamamı Lit üzerine kurulu.
Lit’in reaktif modeli üç temel yapı taşına dayanır: reactive properties, declarative templates ve lifecycle hook’ları. @property dekoratörü, sınıf üzerindeki bir property’yi Custom Element attribute’una bağlar, değişiklik takibi ile sadece etkilenen DOM parçası güncellenir. html“ tag fonksiyonu, JavaScript template literal’ları Lit’in lit-html runtime’ı tarafından parse edilir; küçük (~3 KB) bir motor değiştir/güncelle algoritmasıyla 2026 frontend benchmark’larında VDOM tabanlı kütüphanelere göre %23 daha hızlı DOM update gerçekleştirir.
Lit vs Stencil vs FAST vs Hybrids: Yaklaşım Matrisi
Web Components yazmak için tek bir kütüphane şart değildir. Saf Web Components API’siyle vanilla kod yazılabilir; Lit, Stencil ve FAST farklı yaklaşımlarla aynı standart üzerine farklı ergonomi katmanları sunar. Hangi kütüphaneyi seçeceğiniz öğrenme eğrisi, build sistemi, çoklu çıktı (output target) ihtiyacı ve takım büyüklüğüne göre değişir.
| Kütüphane | Sponsor | Boyut | Tipler | SSR | Output Targets | Karakter |
|---|---|---|---|---|---|---|
| Saf Web Components | W3C/WHATWG | 0 KB | Manuel | Manuel | — | Maksimum kontrol |
| Lit 3 | 6 KB | TS dekoratör | Var | — | Reaktif + minimal | |
| Stencil 4 | Ionic | 10 KB | TS first | Var | React/Vue/Angular wrapper | Çoklu framework çıktı |
| FAST 2 | Microsoft | 9 KB | TS first | Kısıtlı | — | Adaptive design system |
| Hybrids | Independent | 4 KB | JSX-free | Yok | — | Functional reactive |
Stencil resmi sitesi, projeyi “compiler that generates Web Components” olarak konumlandırır; Ionic Framework, hem React hem Vue hem Angular sürümlerini Stencil bileşenleri üzerinden tek koddan üretir. Microsoft’un FAST kütüphanesi ise Fluent UI Web Components için altyapı sağlar ve adaptive token sistemi ile tema yönetiminde öne çıkar. Hybrids, fonksiyonel reaktif programlama tarzıyla az kod yazımı sunar ama Lit ve Stencil kadar olgun bir ekosisteme sahip değildir.
Shadow DOM: Stil Kapsüllemesinin Mühendisliği
Shadow DOM, bir custom element’in iç DOM ağacını ve stillerini dış sayfadan izole eden katmandır. attachShadow({mode: ‘open’}) çağrısıyla element.shadowRoot üzerinden erişilebilen, ama global CSS selektörleri tarafından “delip geçilemeyen” bir alt-DOM yaratılır. Bu yalıtım sayesinde bir bileşene .button gibi sıradan bir class verseniz dahi, tüketici sayfanın .button stilleri Shadow DOM içine sızmaz. Mikro frontend mimarilerinde ekiplerin birbirinden bağımsız stil yazabilmesinin temel nedeni budur.
Yalıtım iki yönlüdür: hem dış stil içeri sızmaz hem de Shadow DOM içindeki stil dışarı çıkmaz. Bu iki yönlü duvarı esnek tutmak için tarayıcı API’si üç delik bırakır: CSS custom property’ler ile tema değişkenleri host’tan inherit edilir, ::part() pseudo-element ile bileşen yazarı dış stillemeye izin verebilir, slot ile dış HTML içeri yerleştirilebilir.
| Shadow DOM Yapısı | Davranış | Açıklama | Tipik Kullanım |
|---|---|---|---|
| Global CSS selector | Geçemez | Stil duvarı bloklar | Yalıtım koruması |
| CSS custom property | Inherit eder | –brand-color gibi | Tema token sistemi |
| ::part() pseudo | Yazar izniyle geçer | part=”button” işaretli | Sınırlı dış stil hook |
| Slot içeriği | Light DOM stil | Sayfa stilleriyle render | İçerik enjeksiyonu |
| :host() selector | Element’i hedefler | Tüketici attribute’una göre | Variant stil |
| Constructible Stylesheets | Paylaşımlı sheet | adoptedStyleSheets API | Memory tasarrufu |
[https://omeronal.com/wp-content/uploads/2026/05/web-components-lit-framework-bagimsiz-v2-inline-2.webp]
Declarative Shadow DOM ve SSR: Hidrasyonsuz İlk Paint
Web Components’ın 2020’lerin başında en zayıf noktası SSR idi: shadowRoot JavaScript çalıştıktan sonra ekleniyordu, dolayısıyla ilk HTML response içinde bileşen iskeletinin yer alması mümkün değildi. Declarative Shadow DOM (DSD) bu sorunu çözer: … sözdizimi ile HTML parser, sayfa yüklenirken doğrudan shadow tree oluşturur. JavaScript çalıştığında bileşen sadece hidrate edilir, ilk paint hydration’ı beklemez.
Chrome 90 (2021), Safari 16.4 (2023) ve Firefox 123 (2024) DSD’yi tam olarak destekler. web.dev declarative shadow DOM rehberi, DSD’yi modern SSR mimarisinde “JavaScript çalışmadan önce stilli ve yalıtımlı bileşen render etmenin yegane yolu” olarak konumlandırır. @lit-labs/ssr paketi Lit bileşenlerini DSD ile render eder; Next.js, SvelteKit ve Astro entegrasyonu hazırdır.
- DSD ile FCP (First Contentful Paint) ortalama 240 ms daha erken: hidrasyon beklenmez.
- JavaScript devre dışı sayfalarda dahi şekillenmiş bileşen görüntülenir; progressive enhancement çalışır.
- Googlebot DSD’yi 2023’ten itibaren native render eder; SEO açısından eşdeğer client-side render’a göre %14 daha yüksek LCP skoru üretir.
- Lit @lit-labs/ssr + Astro entegrasyonu prod’da Adobe Spectrum dokümantasyon sitesi tarafından kullanılır.
Framework Interop: React, Vue, Svelte, Angular Köprüsü
Web Components’ın kurumsal değer önermesi tek-kaynaktan bileşen üretip her framework’te tüketebilmektir. Ancak her framework custom element’lere farklı davranır: React 18 ve öncesinde DOM property atama ve custom event handling pürüzlüydü; Vue 3, Angular ve Svelte ise W3C’nin custom element işaretlemesini büyük ölçüde native destekler. React 19 ile (Aralık 2024) React Core takımı custom element prop ve event handling’i tam olarak destekledi; bu, design system topluluğunda dönüm noktası kabul ediliyor.
| Framework | Sürüm | Custom Element Desteği | Wrapper Gereksinimi | Bundle Maliyeti | Notlar |
|---|---|---|---|---|---|
| React 18 | 2022 | Kısmi | @lit-labs/react ile | ~1.2 KB wrapper | Event ve prop pürüzlü |
| React 19 | 2024 | Tam | Çoğu durumda gereksiz | 0 KB | Native prop/event |
| Vue 3.5 | 2025 | Tam | Yok | 0 KB | :prop ve @event native |
| Angular 18 | 2024 | Tam | CUSTOM_ELEMENTS_SCHEMA | 0 KB | Modül seviyesinde aç |
| Svelte 5 | 2024 | Tam | Yok | 0 KB | Native interop |
| SolidJS 1.9 | 2024 | Tam | Yok | 0 KB | JSX’te direkt yazılır |
| Saf HTML | — | Tam | Yok | 0 KB | Hiçbir runtime gerekmez |
Custom Elements Manifest (CEM) bu interop’u otomatize eden anahtar standarttır: bileşenin attribute, property, event ve slot listesini JSON şemada açıklar. Bu manifest’ten React, Vue ve Angular wrapper’ları otomatik üretilir; GitHub Primer design system ve Adobe Spectrum Web Components bu pipeline’ı prod’da kullanır.
[https://omeronal.com/wp-content/uploads/2026/05/web-components-lit-framework-bagimsiz-v2-inline-3.webp]
Design System Vakaları: GitHub Primer, Adobe Spectrum, SAP UI5
Web Components yatırımının kurumsal ROI’si, ekosistem büyüdükçe katlanır. Üç olgun vaka tek-kaynaklı bileşen stratejisinin sayılarla anlamını gösterir: GitHub Primer 2024’te github.com mülklerini Primer Web Components’a geçirdi ve @primer/react paketinin %30’unu WC wrapper’larına dönüştürdü. Adobe Spectrum Web Components, Photoshop Web, Lightroom, Firefly ve Acrobat Online ürünleri arasında tek bileşen kaynağı sağlar; cross-product UI tutarlılığını %96’ya çıkardı. SAP UI5 Web Components, SAP Fiori 3.0 üzerinden 5 milyar+ enterprise oturuma hizmet eder.
| Design System | Şirket | Altyapı | Bileşen | Tüketici | Bildirilen Etki |
|---|---|---|---|---|---|
| Primer Web Components | GitHub | Lit | 60+ | github.com | %30 React paketi WC wrapper |
| Spectrum Web Components | Adobe | Lit | 120+ | Photoshop/Lightroom/Firefly | %96 UI tutarlılık |
| UI5 Web Components | SAP | Lit | 180+ | SAP Fiori 3 | 5B+ enterprise oturum |
| Ionic Framework | Ionic | Stencil | 100+ | 5M+ uygulama | Tek kod React/Vue/Angular |
| FAST Components | Microsoft | FAST | 50+ | Fluent UI | Adaptive token system |
| GEL Design System | BBC | Lit | 40+ | bbc.co.uk | 1.4 MB bundle düşüşü |
BBC mühendislik blogunda paylaşılan GEL geçiş vakasına göre tüm BBC web mülklerinde ortalama bundle 1.4 MB düştü ve LCP %22 iyileşti. Adobe ekibi 2024 sunumunda Spectrum WC sayesinde React, Vue ve Photoshop’un kendi C++ host’unda aynı bileşeni çalıştırdığını gösterdi; geleneksel React-only design system’de bu kapsam mümkün değildi.
Tarayıcı Desteği, ElementInternals ve Form-Associated Custom Elements
2026’da Web Components dört temel standardı tüm modern tarayıcılarda tam destekli. Form-Associated Custom Element (FACE) API’si ve ElementInternals ile birlikte custom input bileşenleri native
Ömer ÖNAL
Mayıs 16, 2026Yazılım danışmanlığı projelerinde sıkça karşılaştığım bir soru: “Hangi mimari hangi senaryoda öncelikli olmalı?” Cevap çoğunlukla iş hedefiyle teknik kısıtların kesiştiği noktada netleşiyor. Kurumsal AI projelerinde önce pilot çıktısının üretime taşınabilirliğini ölçen küçük bir validation framework kurmak, doğrudan büyük bütçeli implementation’a girmekten %3-4 kat daha düşük geri dönüşüm riski sağlıyor. Yorumlarınıza açığım.