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

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

Nuxt.js Nedir?

Express.js logosu ve basit bir API route örneği gösteren ekran görüntüsü

Express.js Nedir?

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

URL Structure Nedir?

NestJS logosu ve modüler yapı şeması

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

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

SvelteKit Nedir?

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

Lazy Loading Nedir?

Web güvenliği tehditlerini ve koruma kalkanını simgeleyen kilit ve kod karışımı görsel

Web Güvenliği 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?

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

Docker Nedir?

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

UI/UX Tasarım 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?

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

CI/CD Nedir?

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

Astro Nedir?

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

GraphQL Nedir?

Hosting Nedir başlığını temsil eden, sunucu odasını veya bir web sitesinin barındırılmasını simgeleyen illüstrasyon

Hosting Nedir?

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

WebAssembly Nedir?

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

JavaScript Nedir?

İki uygulama arasında otomatik tetiklenen webhook veri akışını gösteren şema

Webhook Nedir?

Alan adından IP adresine dönüşüm sürecini gösteren DNS sorgu akış şeması

DNS Nedir?

Headless CMS Nedir başlığını temsil eden, içerik deposu ile farklı cihazlara (web, mobil, IoT) API üzerinden içerik dağıtımını gösteren şema

Headless CMS Nedir?

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?

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

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

HTML Nedir başlığını temsil eden, HTML etiketlerini ve web geliştirme temellerini gösteren kod snippet görseli

HTML 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ı?

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?

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

Websitesi Nedir?

Web tarayıcısında 3D ürün modeli döndürülen ve AR ile mobilyanın odada görüntülendiği örnek

3D ve AR Web Deneyimleri

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

Server-First ve Edge Rendering

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

SEO Nedir?

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?

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

Browser Cache Nedir?

Google arama sonuçlarında 1. sırada çıkan bir web sitesi, yeşil URL ve yıldızlı snippet gösteren ekran görüntüsü

Google’da İlk Sayfaya Çıkmak

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?

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

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

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

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

Base64 Encoder & Decoder

Metin ve görselleri Base64 formatına dönüştürün veya Base64 kodunu çözün. API geliştirme ve veri aktarımı için vazgeçilmez.

Kod & GeliştirmeGeliştirici

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

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

CSS Oluşturucu

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

Web TasarımÜcretsiz

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