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

Google arama çubuğunda "site:sitetasarimtr.com" yazıldığında sonuç çıkmayan ekran, yanında kırmızı uyarı ve düzeltme butonu

Web Siteniz Google’da Görünmüyor mu?

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?

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

Vercel / Netlify Nedir?

CMS Nedir başlığını temsil eden, içerik yönetim sistemlerini ve platformlarını (WordPress, Joomla) simgeleyen görsel

CMS 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?

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?

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

SvelteKit Nedir?

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

GraphQL Nedir?

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

Web Components Nedir?

Lazy Loading Nedir başlığını temsil eden, yavaş yavaş yüklenen görsel katmanlarını gösteren illüstrasyon

Lazy Loading Nedir?

Docker logosu ve konteyner mimarisini gösteren şematik görsel

Docker Nedir?

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

Vite Nedir?

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

SEO Nedir?

Zero-Click Searches ve Featured Snippets başlığını temsil eden, Google SERP’te öne çıkan kutu (featured snippet) ve PAA sorularını gösteren ekran görüntüsü

Zero-Click Searches ve Featured Snippets Nedir?

MongoDB logosu ve koleksiyon/doküman yapısını gösteren görsel

MongoDB Nedir?

CI/CD pipeline akış şeması (commit, test, build, deploy)

CI/CD Nedir?

Mikrofon simgesi ve ses dalgalarıyla çalışan voice arayüzü gösteren modern görsel

Voice UI ve Sesli Arama Optimizasyonu

Schema Markup Nedir başlığını temsil eden, JSON-LD kod blokları ve arama sonuçlarında çıkan yıldızlı snippet örneği

Schema Markup Nedir?

Google Analytics Nedir başlığını temsil eden, web trafiği analizlerini ve raporlama verilerini gösteren grafikler

Google Analytics Nedir?

API Nedir başlığını temsil eden, farklı uygulamaların birbiriyle iletişimini gösteren bağlantı noktası illüstrasyonu

API 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?

JavaScript Nedir başlığını temsil eden, dinamik web içeriği ve programlama fonksiyonlarını gösteren illüstrasyon

JavaScript Nedir?

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

Motion UI ve Mikro Animasyonlar

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

CSS Nedir?

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?

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

WebAssembly Nedir?

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

Websitesi Nedir?

LinkedIn ve Twitter'da paylaşılan linkin büyük görsel önizlemesiyle doğru Open Graph çıktısını gösteren ekran görüntüsü

Open Graph ve Twitter Card 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?

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

CDN Nedir?

Browser Cache Nedir başlığını temsil eden, tarayıcıda önbellek mekanizmasını gösteren illüstrasyon

Browser Cache Nedir?

Google Mobile-Friendly Test ekranı ve mobil cihazlarda bozuk site örneği

Mobil Uyumlu Web Sitesi Neden Zorunlu?

UI (buton, renk) ve UX (kullanıcı yol haritası) kavramlarını yan yana gösteren illüstrasyon

UI/UX Tasarım Nedir?

Node.js logosu ve sunucu mimarisini gösteren şema

Node.js 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 Araçları

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

Markdown Editor

Markdown metinlerinizi yazın ve anında canlı HTML önizlemesini görün. Başlıklar, listeler, kod blokları ve daha fazlası. Tarayıcıda, hızlı ve ücretsiz!

Web AraçlarıYeni

Emoji Seçici

1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.

Emoji & İçerikÜcretsiz

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

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

Renk Seçici

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

Web TasarımAraç

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

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 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

CSS Oluşturucu

CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.

Web TasarımÜcretsiz