crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Web Components Nedir?
Web Components; framework bağımsız (React, Vue veya Angular'a ihtiyaç duymadan) tekrar kullanılabilir bileşenler oluşturmamızı sağlayan üç ana teknolojinin birleşimidir:
[]Custom Elements: Yeni HTML etiketleri tanımlama yeteneği.
[]Shadow DOM: Bileşenin stilini ve yapısını ana dökümandan izole etme.- HTML Templates (<template>): Sayfa yüklendiğinde render edilmeyen, sadece ihtiyaç anında kopyalanan HTML parçaları.
2. Shadow DOM: Gizli ve İzole Dünya
Shadow DOM, bir HTML elementinin içine "gizli" bir DOM ağacı eklemenizi sağlar. Bu ağaçtaki CSS kuralları dışarı sızmaz, dışarıdaki CSS kuralları da içeriye etki etmez.
Neden kullanmalıyız?
Diyelim ki bir buton bileşeni yaptınız ve içine .btn { color: red; } yazdınız. Eğer Shadow DOM kullanmazsanız, web sayfanızdaki tüm butonlar kırmızı olur. Shadow DOM kullanırsanız, sadece sizin bileşeninizin içindeki buton kırmızı kalır.
3. Kendi Bileşeninizi Oluşturun (Örnek: <user-card>)
Hadi, bir kullanıcının bilgilerini şık bir şekilde gösteren özel bir etiket tasarlıyalım.
JavaScript:
class UserCard extends HTMLElement {
constructor() {
super();
// 1. Shadow Root'u oluşturuyoruz (açık modda)
const shadow = this.attachShadow({ mode: 'open' });
// 2. Bileşenin yapısını oluşturuyoruz
const container = document.createElement('div');
container.innerHTML = `
<style>
.card {
background: #f4f4f4;
padding: 15px;
border-radius: 8px;
border-left: 5px solid #333;
font-family: sans-serif;
}
h3 { color: #2c3e50; }
</style>
<div class="card">
<h3>${this.getAttribute('name') || 'İsimsiz Kullanıcı'}</h3>
<p><slot name="email">E-posta belirtilmedi.</slot></p>
</div>
`;
// 3. Shadow DOM'a ekliyoruz
shadow.appendChild(container);
}
}
// 4. Yeni etiketimizi tarayıcıya kaydediyoruz
customElements.define('user-card', UserCard);HTML'de Kullanımı:
HTML:
<user-card name="Ahmet Yılmaz">
<span slot="email">[email protected]</span>
</user-card>4. Lifecycle (Yaşam Döngüsü) Metodları
Özel elementlerin belirli aşamalarda çalışan özel fonksiyonları vardır:
[]connectedCallback: Element sayfaya (DOM'a) eklendiğinde çalışır.
[]disconnectedCallback: Element sayfadan kaldırıldığında çalışır.- attributeChangedCallback: Elementin bir özelliği (attribute) değiştiğinde tetiklenir.
Neden Web Components?
| Özellik | Framework Bileşenleri (React vb.) | Web Components (Native) |
|---|---|---|
| Bağımlılık | Kütüphane yüklü olmalı | Sıfır bağımlılık (Native JS) |
| İzolasyon | CSS çakışması olabilir | Shadow DOM ile tam izolasyon |
| Ömür | Sürüm güncellemeleri gerekebilir | Standart HTML'dir, yıllarca çalışır |
Sonuç
Web Components ve Shadow DOM, özellikle büyük ekiplerin çalıştığı projelerde veya farklı projelerde kullanılacak "UI Kütüphaneleri" oluştururken vazgeçilmezdir. Tarayıcının gücünü doğrudan kullanarak, framework kalabalığına girmeden kapsüllenmiş, temiz ve profesyonel modüller yaratabilirsiniz.