HTTP Archive 2025 raporuna göre ziyaret edilen web sayfalarının %19,9’unda en az bir Custom Element kullanılıyor; Web Components ve React arasındaki 2026 tasarım sistemi tercihi kurumsal stratejinin en kritik teknik kararlarından biri.
Tasarım Sisteminin 2026 Kurumsal Stratejisindeki Yeri
Sparkbox 2024 Design Systems Survey raporuna göre kurumsal şirketlerin %71’i aktif bir tasarım sistemine sahip ve bu oran beş yıl önce %46’ydı. Forrester 2025 raporu tasarım sistemine yatırım yapan kurumların ürün geliştirme hızının %47 arttığını, tutarlılık skorunun %62 yükseldiğini ve bakım maliyetinin %33 azaldığını gösterdi. HTTP Archive 2025 verisinde Custom Element kullanım oranı 2020’de %8,4’ten 2025’te %19,9’a çıktı; en yaygın kullanılanlar youtube-embed, spotify-embed, iconify-icon, Material Web Components ve Adobe Spectrum bileşenleri. React 19, web components ile entegrasyonunu iyileştirdi; custom element prop’ları artık jenerik özellik atama yerine doğru DOM property assignment ile aktarılıyor. Lit framework 3.x GitHub’da 19 bin yıldız ile aktif; haftalık npm indirme sayısı 1,2 milyon. WebComponents.org bu kategorideki en kapsamlı referans rehberi.
Web Components ve React: Mimari Farklar
Web Components dört native browser API’sinden oluşur: Custom Elements (yeni HTML element’i tanımlama), Shadow DOM (encapsulated DOM + CSS), HTML Templates (,
| Boyut | Web Components | React | Hybrid | Açıklama |
|---|---|---|---|---|
| Çalışma ortamı | Tüm tarayıcılar | React + ReactDOM | Her ikisi | WC platform standardı |
| Encapsulation | Shadow DOM | CSS Modules/Tailwind | Kütüphane bazlı | WC’de native style izolasyon |
| Framework bağımlılığı | Yok | React ekosistemi | Adapter katmanı | WC en bağımsız |
| Bundle (örnek button) | 4 KB (Lit) | 52 KB (React + DOM) | Karışık | WC daha kompakt |
| Type safety | JSDoc / TypeScript | TypeScript JSX | Karışık | React tip deneyimi daha olgun |
| SSR desteği | Declarative Shadow DOM | React 19 RSC | Karışık | WC SSR olgunlaşıyor |
Design Token ve Çoklu Platform Stratejisi
Design token, tasarım kararlarının (renk, tipografi, spacing, motion) JSON formatında platform-bağımsız temsili. W3C Design Tokens Community Group standartlaştırma çalışmasını yürütüyor; Style Dictionary, Tokens Studio, Specify gibi araçlar token’ları farklı çıktılara (CSS, iOS Swift, Android XML, Flutter) dönüştürüyor. Web Components ile tasarım sistemi kurulduğunda token’lar CSS Custom Properties olarak Shadow DOM içine işlenir; React tabanlı sistemde Tailwind config veya CSS-in-JS theme provider ile yönetilir.
- Multi-brand: Web Components ile aynı bileşen farklı brand token setiyle render edilir.
- Multi-platform: Token’lar tek kaynaktan iOS, Android, web çıktısına çevrilir.
- Multi-tüketici: Web Components React, Vue, Angular, Svelte, vanilla HTML projelerinde aynı paketle kullanılır.
- Adobe Spectrum, SAP Fundamental Library, GE Predix tasarım sistemleri Web Components üzerine kurulu.
- Material Web Components Google’ın resmi MUI alternatifi olarak Web Components ile yazıldı.
İlgili konu: Design tokens rehberimizde Figma’dan kod üretim akışı detaylandırıldı.
Implementation Pattern ve Lit ile Pratik Yaklaşım
Lit framework Web Components yazımı için endüstri standardı; reactive properties, declarative templates, ek 4 KB runtime ve TypeScript-first deneyim sunuyor. Stencil ise Ionic ekibinin geliştirdiği compile-time aracı; aynı kaynaktan React, Vue, Angular wrapper’larını otomatik üretiyor. Microsoft Fast Foundation FluentUI Web Components ile entegre. Google Material Web Components Lit üzerine kurulu.
Operasyon, Versiyonlama ve Governance
Kurumsal tasarım sisteminde governance kritik; versiyon politikası, semantik versioning, deprecation süresi, accessibility (WCAG 2.2 AA) gereksinimleri, dokümantasyon (Storybook) ve test stratejisi (Playwright, axe-core) tek paket halinde yönetilmeli. Web Components tabanlı sistemde NPM publish + JSR dağıtımı ile tüketici uygulamalar standart paket yöneticisinden import edilir; aynı paket React, Vue, Angular projelerde değişmeden kullanılır.
| Konu | Web Components | React | Strateji | Açıklama |
|---|---|---|---|---|
| Versiyonlama | SemVer + JSR/NPM | SemVer + NPM | Aylık release | Çift araç ortak |
| Storybook desteği | Var (Web Components addon) | Yerleşik | Tek doküman | İki ekosistem uyumlu |
| Accessibility test | axe-core + Playwright | jest-axe + Storybook | CI/CD’de zorunlu | WCAG 2.2 AA hedef |
| Visual regression | Chromatic / Percy | Chromatic / Percy | PR per check | İkisi de destekler |
| Tahmini yıllık maliyet (orta ölçek) | 120 K USD | 140 K USD | 3-4 kişi ekip | Bakım dahil |
| ROI süresi | 14 ay | 16 ay | 3 üründe kullanıldığında | Forrester 2025 ortalaması |
Sektörel Use Case’ler ve Türkiye Bağlamı
Çok markalı holdinglerde (Doğuş Holding, Anadolu Group, Koç Holding gibi) Web Components tabanlı tasarım sistemi farklı şirketlerin farklı stack’lerle aynı bileşeni paylaşmasını sağlıyor. Tek ürünlü startup’larda (Insider, Picus Security, Getir, Trendyol Tech) React tabanlı tasarım sistemi geliştirici verimliliği için yeterli. Banking ve fintech (Akbank, Garanti, ParamPara) projelerinde Web Components olgunluğu, accessibility regülasyonları ve uzun ömürlü bileşen ihtiyacı için tercih ediliyor. Google Material Web kütüphanesi Web Components yaklaşımının olgun bir referansı.
Kurumsal Tasarım Sistemi Dönüşümünde Karşılaşılan Tipik Sorunlar
Danışmanlık projelerinde gözlemlenen tipik darboğazlar:
- Tasarım sistemini “bir kerelik yatırım” olarak konumlamak ve adanmış ekip kurmadan başlatmak.
- Web Components seçiminde React tüketici ekiplerin custom event handling’i bilmemesi ve
addEventListenerpatterns’a alışkın olmaması. - Design token kataloğunun erken aşamada Style Dictionary ile entegre edilmemesi ve daha sonra büyük migration maliyeti çıkarması.
- Storybook ve Chromatic’in CI pipeline’a entegre edilmemesi, PR per regresyon kontrolünün manuel kalması.
- Accessibility testlerinin proje sonuna bırakılması ve WCAG 2.2 AA gereksinimlerinin son anda tespit edilmesi.
- Semantic versioning kuralının ekipler arasında tutarsız uygulanması ve breaking change’lerin uyarı olmadan yayınlanması.
Sonuç
2026’da tasarım sistemi seçimi tek bir framework tercihi değil, kurumsal kullanıcı sayısına ve tüketici platform çeşitliliğine bağlı stratejik karar. Çok markalı, çok platformlu, uzun ömürlü tasarım sistemleri için Web Components (Lit + Style Dictionary + Storybook); tek React ürün ekosisteminde geliştirici verimliliği öncelikse React tabanlı sistem (Tailwind + shadcn/ui + design tokens). Hibrit yaklaşım da olası: çekirdek primitive Web Components ile yazılır, ekibe yakın layout/utility React ile sarmalanır. Doğru soru “WC mi React mı” değil, “kaç tüketici platform sizi bekliyor”. Yorumlarınızı bekliyorum, ekibinizde hangi tasarım sistemi stratejisini hangi gerekçeyle uyguluyorsunuz?
Sıkça Sorulan Sorular
Web Components React projelerinde kullanılabilir mi?
Evet, React 19 web components entegrasyonunu önemli ölçüde iyileştirdi; prop assignment, custom event handling artık native destekleniyor, eski sürümlerde @lit-labs/react gibi wrapper’lar kullanılabiliyor.
Lit framework yerine vanilla Web Components yazılmalı mı?
Lit 4 KB runtime ekleyerek reactive properties, declarative templates ve TypeScript-first DX sunduğu için geliştirici verimliliği açısından üretkenlik kazandırıyor; vanilla yaklaşım çok küçük bileşenler için mantıklı ancak production tasarım sisteminde Lit standart tercih.
Material UI gibi React component library mi yoksa Material Web Components mi?
Tek React ürünü olan ekipler için Material UI hala kolay; ancak Google’ın yeni geliştirme yönü Material Web Components tarafında, MUI v6 sonrası Material 3 desteği sınırlı kalıyor, çoklu platform stratejisi olan ekipler Material Web’e geçmeyi değerlendirmeli.
Tasarım sisteminin kurum maliyetini geri ödeme süresi nedir?
Forrester 2025 raporuna göre orta ölçekli tasarım sistemleri (3-4 kişi ekip, 30+ bileşen) 14-18 ay arası ROI sağlıyor; bu süre tasarım sistemini en az üç ürün ekibi tüketince gerçekleşiyor, tek ürün için yatırım gerekçesi zayıf.
Shadow DOM SEO’yu etkiler mi?
Modern arama motorları (Google 2024 sonrası) Shadow DOM içeriğini render edebiliyor; ancak içerik ağırlıklı kritik HTML için light DOM veya Declarative Shadow DOM (DSD) tercih edilmeli, server-rendered shadow root SEO açısından güvenli.
Ömer ÖNAL
Mayıs 18, 2026Çok markalı holdinglerde tasarım sistemini Web Components üzerine kurmayı tercih ediyorum: React, Angular, Vue ve sade HTML tüketicileri aynı bileşeni paylaşır, marka tutarlılığı tek kaynaktan akar. Tek uygulamalı startup’larda ise framework-native React tasarım sistemi geliştirici verimliliğini ön plana çıkarıyor. Doğru soru web bileşenleri mi React mı değil, kaç tüketici platform sizi bekliyor sorusudur. — Ömer ÖNAL