sitetasarimtr_logo
Yükleniyor

Bilgi Merkezi / Web Components Nedir?

Web Components Nedir? Framework Bağımsız Reusable Komponentler

Giriş

Web Components, tarayıcıların yerel olarak desteklediği, framework bağımsız reusable UI komponentleri oluşturma standartlarıdır. Custom Elements, Shadow DOM ve HTML Templates ile kapsüllenmiş, yeniden kullanılabilir komponentler geliştirilir.

Bu rehberde Web Components'ın ne olduğunu, temel teknolojilerini ve Vanilla JS avantajlarını adım adım açıklayacağız.

Web Components Nedir?

Web Components, modern tarayıcılarda yerleşik olarak çalışan bir dizi web standardıdır. React, Vue veya Angular gibi framework'lere bağımlı olmadan özel HTML elementleri tanımlamanızı sağlar.

  • Custom Elements
  • Shadow DOM (kapsülleme)
  • HTML Templates
  • ES Modules
  • Framework bağımsız
Web Components yapısını ve Shadow DOM kapsüllemesini gösteren şema

Web Components - Kapsüllenmiş ve Yeniden Kullanılabilir

Web Components'ın Temel Teknolojileri

Web Components üç ana standart üzerine kuruludur:

1. Custom Elements

Yeni HTML etiketleri tanımlama (class extends HTMLElement).

2. Shadow DOM

Stil ve DOM kapsüllemesi, dış etkiyi önler.

3. HTML Templates

<template> ile inert markup tanımlama.

Web Components vs Framework Komponentleri

ÖzellikWeb ComponentsReact/Vue
BağımlılıkYok (Vanilla)Framework gerekli
KapsüllemeShadow DOMKısmi
Yeniden KullanımHer yerdeFramework içinde
PerformansYüksekİyi

Basit Bir Web Component Örneği

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<h1>Merhaba Web Components!</h1>`;
  }
}

customElements.define('my-component', MyComponent);

Kullanım: <my-component></my-component>

Sıkça Sorulan Sorular (FAQ)

Web Components framework gerektirir mi?

Hayır, tamamen Vanilla JS ile çalışır.

Hangi tarayıcılar destekler?

Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge).

Lit veya Stencil gibi kütüphaneler gerekli mi?

Hayır, geliştirme kolaylığı için opsiyonel.

Büyük projelerde kullanılır mı?

Evet, YouTube, Salesforce gibi platformlar kullanır.

Sonuç

Web Components, framework bağımsız, kapsüllenmiş ve uzun ömürlü UI komponentleri için en iyi standarttır.

Site Tasarım TR olarak Web Components ile geleceğe hazır projeler geliştiriyoruz. Teklif için bize ulaşın.

Diğer İçerikler

Web sayfasında yumuşak geçişli mikro animasyonlar ve hover efektleri gösteren dinamik görsel

Motion UI ve Mikro Animasyonlar

Astro logosu ve island architecture şeması gösteren görsel

Astro Nedir?

Frontend vs Backend Nedir başlığını temsil eden, ön yüz (tasarım) ve arka yüz (sunucu) arasındaki farkı gösteren şematik görsel

Frontend vs Backend Nedir?

Hızlı yüklenen bir web sitesi, yeşil PageSpeed skoru ve Core Web Vitals 100/100 gösteren ekran görüntüsü

Web Siteniz 3 Saniyeden Yavaş mı?

Web Tasarım Nedir başlığını temsil eden, kullanıcı deneyimi ve tasarım trendlerini simgeleyen, yaratıcı bir görsel

Web Tasarım Nedir?

URL Structure Nedir başlığını temsil eden, temiz ve SEO dostu bir URL yapısını gösteren örnek

URL Structure Nedir?

Web Accessibility Nedir başlığını temsil eden, tüm kullanıcıların (engelli, yaşlı vb.) internete erişimini simgeleyen görsel

Web Accessibility Nedir?

Backlink Nedir başlığını temsil eden, bir web sitesinden diğerine giden bağlantı akışını gösteren illüstrasyon

Backlink Nedir?

PWA Nedir başlığını temsil eden, mobil uygulama görünümünde bir Progressive Web App simgesi veya görseli

PWA Nedir?

WebAssembly performans karşılaştırması gösteren grafik ve tarayıcıda native hızda çalışan uygulama illüstrasyonu

WebAssembly Nedir?

Sitemap Nedir başlığını temsil eden, bir web sitesinin haritasını ve XML kod yapısını gösteren görsel

Sitemap Nedir?

Angular logosu ve component yapısını gösteren ekran görüntüsü

Angular Nedir?

Core Web Vitals Nedir başlığını temsil eden, LCP, FID, CLS metriklerini ve hızlı yüklenen bir sayfa gösteren görsel

Core Web Vitals Nedir?

CDN Nedir başlığını temsil eden, dünya üzerinde dağıtılmış sunucu noktalarını gösteren şematik görsel

CDN Nedir?

Vercel ve Netlify logoları yan yana, arka planda global CDN haritası

Vercel / Netlify Nedir?

Yeşil yapraklar ve enerji tasarrufu simgeleriyle sürdürülebilir web sitesini temsil eden illüstrasyon

Sürdürülebilir Web Tasarımı

SvelteKit logosu ve dosya tabanlı routing yapısını gösteren ekran görüntüsü

SvelteKit Nedir?

Websitesi Nedir başlığını temsil eden, farklı web sitesi türlerini ve yapım aşamalarını gösteren grafik

Websitesi Nedir?

PostgreSQL logosu ve ilişkisel veritabanı şeması örneği

PostgreSQL Nedir?

Edge network üzerinde çalışan server-first mimari şeması ve CDN globe ikonu

Server-First ve Edge Rendering

CSS Nedir başlığını temsil eden, renk paletleri ve tasarım kurallarını (Cascading Style Sheets) simgeleyen görsel

CSS Nedir?

Git Versiyon Kontrol Nedir başlığını temsil eden, branch ağacı ve terminal ekranında Git komutlarını gösteren görsel

Git Versiyon Kontrol Nedir?

Local SEO ve Google İşletme Profili optimizasyonunu gösteren, harita üzerinde bir işletmenin birinci sırada çıktığı görsel

Local SEO Nedir?

NestJS logosu ve modüler yapı şeması

NestJS Nedir?

Vite logosu ve hızlı sunucu başlatma süresini gösteren performans karşılaştırması

Vite Nedir?

Sürükle-bırak arayüzüyle no-code web sitesi oluşturan ekran görüntüsü

No-Code / Low-Code Platformlar

Page Speed Optimization Nedir başlığını temsil eden, hızlı yükleme ve web performansını simgeleyen hız göstergesi

Page Speed Optimization Nedir?

HTTPS ve SSL Nedir başlığını temsil eden, kilit simgesi veya güvenli bağlantıyı işaret eden sertifika görseli

HTTPS ve SSL Nedir?

SEO Nedir başlığını temsil eden, arama motoru optimizasyonu kavramını ve stratejilerini gösteren illüstrasyon

SEO Nedir?

Web Components yapısını ve Shadow DOM kapsüllemesini gösteren şema

Web Components Nedir?

Meta Tags Nedir başlığını temsil eden, arama motoru sonuç sayfasındaki başlık ve açıklama (meta) etiketlerini gösteren görsel

Meta Tags Nedir?

React logosu ve bileşen ağacını gösteren klasik ekran görüntüsü

React Nedir?

Nuxt.js logosu ve pages klasörü yapısını gösteren klasik ekran görüntüsü

Nuxt.js Nedir?

GraphQL logosu ve tek endpoint üzerinden sorgu yapısını gösteren görsel

GraphQL Nedir?

Google AI Overview ekranında birinci sırada çıkan kaynak kutusu, Gemini ve SGE sonuçlarında öne çıkan içerik örneği

AI Search Optimization (AIO) Nedir?

Web Araçları

Alarm Saati & Hatırlatıcı

Tarayıcınızda saniyeler içinde alarm kurun. Sabah uyanma, toplantı hatırlatması, mola zamanı veya "yatma vakti" için ideal. Birden fazla alarm, özelleştirilebilir sesler, bildirim desteği ve kolay erteleme.

Günlük VerimlilikHer Gün Kullan

Web Editor

HTML ve CSS kodlarınızı yazın, düzenleyin ve canlı önizlemeyi görün. Hızlı prototipleme ve öğrenme için ideal.

Kod & GeliştirmeCanlı Düzenleyici

QR Kod Oluşturucu

URL, Wi-Fi, vCard, metin gibi verilerinizi saniyeler içinde özelleştirilebilir QR koda çevirin. Logo, renk ve SVG/PNG indirme desteği.

QR & PaylaşımPopüler

Renk Seçici

Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.

Web TasarımAraç

Resim Format Dönüştürücü

PNG → JPG, JPG → PNG, WEBP → JPG/PNG, HEIC → JPG gibi en popüler formatlar arasında saniyeler içinde dönüşüm yapın. Kalite ayarı, toplu işlem desteği ve tamamen tarayıcıda – indirme olmadan!

MultimedyaPopüler

PDF Küçültücü & Sıkıştırıcı

PDF dosyalarınızı kalite kaybı minimumda %50-90 küçültün. Dosya boyutu seçimi, sayfa optimizasyonu ve tamamen tarayıcıda işlem – sunucuya yükleme yok!

PDF & DokümanPopüler

Ücretsiz Fotoğraf Düzenleyici

Tarayıcıda profesyonel fotoğraf düzenleme. Parlaklık, kontrast, doygunluk, sıcaklık, netlik, vignette ve 10+ hazır filtre ile Lightroom benzeri deneyim. Hiç indirme gerekmez, tamamen ücretsiz!

MultimedyaYeni

Güçlü Şifre Oluşturucu

Anında rastgele ve çok güçlü şifreler üretin. Uzunluk, büyük/küçük harf, rakam, sembol ayarları + kendi şifrenizi test etme özelliği.

GüvenlikGüvenlik

PDF Ayırıcı (Sayfa Bölme)

Tek PDF dosyasını istediğiniz sayfalara ayırın. Belirli sayfaları seçin veya aralık belirleyin, saniyeler içinde yeni PDF’ler oluşturun – tamamen tarayıcıda!

PDF & DokümanYeni

PDF Birleştirici

Birden fazla PDF dosyasını tek bir PDF’de birleştirin. Sıra değiştirme, önizleme ve yüksek kaliteli çıktı desteği. Tarayıcıda, hızlı ve ücretsiz!

PDF & DokümanFavori