Slot ve shadow boundary
Shadow boundary'ı ve slot dağıtımını öğrenirsin.
Slot nedir?
Slot, shadow DOM içindeki bir yer tutucudur; dışarıdan gelen içeriği gösterir. Custom element, iç yapısını shadow DOM'a gizlerken, kullanıcının gönderdiği çocukları slot'larda konumlandırır.
İki tür slot vardır: <slot> (varsayılan) tüm çocukları alır; <slot name="avatar"> yalnızca slot="avatar" özniteliği taşıyan çocuğu alır. Böylece shadow DOM iskeleti dış dünyadan ayrı (encapsulated) kalır.
Adlandırılmış slot kullanımı
Adlandırılmış slot kullanmak için çocuğa slot özniteliği yazılır. Örneğin <h2 slot="name">Ayşe</h2> çocuğu, shadow DOM içindeki <slot name="name"> yerine dağıtılır. Eşleşmeyen adlar varsayılan slota gider.
Bu sayede aynı custom element farklı içeriklerle çalışır: kart başlığı bir yerde, avatar başka bir yerde gösterilir. Kullanıcı, iç yapının ayrıntısını bilmeden yalnızca slot adlarını bilir.
Uygulama profile-card için slot içeriği yaz
Bir <profile-card> elementi yaz. İçinde üç çocuk olsun ve her biri bir slota dağıtılsın:
<img slot="avatar">— src dolu<h2 slot="name">— içeriği dolu (isim)<p slot="bio">— içeriği dolu (biyografi)
Sonunda </profile-card> kapanış etiketi olsun.
Örnek çözümü göster
<profile-card>
<img slot="avatar" src="/kullanici/ayse/avatar.png" alt="Ayşe Yılmaz avatarı">
<h2 slot="name">Ayşe Yılmaz</h2>
<p slot="bio">Ürün tasarımcısı, İstanbul'da yaşıyor.</p>
</profile-card>Kendini test et
-
slot özniteliğiyle işaretlenen çocuklar aslında nerede yaşar?
<profile-card> <h2 slot="name">Ayşe</h2> </profile-card>- Light DOM'da (ışık DOM) kalır, shadow DOM'a kopyalanmaz
- Shadow DOM'a kopyalanır, light DOM'dan silinir
- Document fragment olarak ayrılır
- Template içine taşınır
Cevabı göster
Light DOM'da (ışık DOM) kalır, shadow DOM'a kopyalanmaz — Doğru. slot dağıtımı görseldir; çocuk light DOM'da kalır, yalnızca slot konumunda gösterilir.
-
Adlandırılmış slot için özniteliği tamamla
<img src="/kullanici/ayse/avatar.png" alt="Ayşe" ____="avatar">Cevabı göster
<img src="/kullanici/ayse/avatar.png" alt="Ayşe" slot="avatar"> -
Slot adını amacına eşleştir
- avatar
- Profil resmi
- name
- Kullanıcı adı
- bio
- Kısa biyografi
- actions
- Düğme grubu