Shadow DOM temelleri
Bir öğeye shadow root ekleyerek stilleri ve DOM'u kapsüllemeyi öğrenirsin.
Shadow DOM
Shadow DOM bir öğenin iç yapısını dış DOM'dan yalıtır. İçerideki stiller ve kimlikler (id) dış sayfayı etkilemez; bu sayede bileşenler tekrar kullanılabilir ve çakışmasız olur. Custom elementlerle birlikte sık kullanılır.
Bir öğeye shadow root eklemek için element.attachShadow({ mode: 'open' }) çağrılır. Dönen shadow root, tıpkı bir DOM düğümü gibi içerik eklenebilen bir kapsayıcıdır. mode: 'open' dışarıdan erişime izin verir; closed ise engeller.
attachShadow ve shadow root
Shadow root eklemenin tipik biçimi:
const root = element.attachShadow({ mode: 'open' });
root.innerHTML = '<p>Merhaba</p>';Burada innerHTML shadow ağacını kurar. İçeriğe yalnızca shadow root üzerinden erişilir; dış sayfadaki querySelector onu göremez. open modunda element.shadowRoot ile root'a ulaşabilirsin; closed modunda bu null döner.
Slot ile dış içerik
Slot, shadow DOM içine dışarıdan içerik yerleştirmenin yoludur. Shadow ağacında <slot></slot> yazarsın; öğe kullanıldığında aradaki çocuklar bu yuvaya düşer. Böylece bileşen hem kendi yapısını hem de kullanıcının verdiği içeriği birleştirir.
İsimli slot ile birden fazla nokta tanımlanır: <slot name="başlık"></slot>. Dışarıdaki çocuklar slot="başlık" özniteliği ile doğru yuvaya gider.
Uygulama box öğesine shadow root ekle
box öğesine open modunda bir shadow root ekle. İçine <p>Merhaba</p> HTML'ini yerleştir. root değişkenini shadow root olarak kullan.
Örnek çözümü göster
1. box.attachShadow({ mode: 'open' }) ile shadow root oluştur.
2. Dönen kökü root değişkenine ata.
3. root.innerHTML'e bir p etiketi yerleştir.
Örnek çözüm:
const root = box.attachShadow({ mode: 'open' });
root.innerHTML = '<p>Merhaba</p>';Kendini test et
-
Shadow DOM ne sağlar?
- Daha hızlı ağ isteği
- Otomatik veri tabanı bağlantısı
- Stil ve kimlik yalıtımı
- Üçüncü taraf çerezler
Cevabı göster
Stil ve kimlik yalıtımı — Doğru. Shadow DOM iç stilleri ve kimlikleri dış sayfadan gizler ve yalıtır.
-
open modunda shadow root ekle
const root = element.attachShadow({ mode:____});Cevabı göster
const root = element.attachShadow({ mode:'open'}); -
Shadow DOM terimlerini eşleştir
- shadowRoot
- Shadow ağacının kökü
- attachShadow
- Shadow root ekler
- open
- Dış erişime izin verir
- closed
- Dış erişimi engeller