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

Sıradaki ders: Declarative shadow DOM

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler