Özet - Bileşen kütüphanesi iskeleti

Tüm web bileşen teknikleriyle bir kart ve modal iskeleti yazarsın.

Özet: Teknikleri birleştir

Bu grupta custom element isimlendirme, slot dağıtımı, deklaratif shadow DOM, form ilişkilendirme ve erişilebilirlik rollerini öğrendin. Şimdi hepsini bir <modal-dialog> iskeletinde birleştireceğiz.

İskelet şunları taşır: geçerli bir custom element adı, SSR uyumlu <template shadowrootmode="open">, içinde adlandırılmış ve varsayılan slot, dışarıda slot ile dağıtılan başlık ve gövde, erişilebilirlik için role="dialog" ve aria-modal="true". Hepsi bir arada.

Uygulama Tüm teknikleri birleştiren modal iskeleti yaz

Bir <modal-dialog> elementi yaz. Açılış etiketinde role="dialog", aria-modal="true" ve aria-label (içeriği dolu) olsun. İçinde:

Bir <template shadowrootmode="open"> — içinde bir <slot name="title"> ve bir varsayılan <slot>
Template dışında, profile-card içinde, bir <h2 slot="title"> (içeriği dolu)
Bir <p> (içeriği dolu, varsayılan slota gider)
Sonuçta </modal-dialog> kapanışı

Örnek çözümü göster

<modal-dialog role="dialog" aria-modal="true" aria-label="Onay penceresi">
  <template shadowrootmode="open">
    <h2>Pencere başlığı</h2>
    <slot name="title"></slot>
    <slot></slot>
  </template>
  <h2 slot="title">Kaydı sil</h2>
  <p>Bu kaydı silmek istediğinden emin misin?</p>
</modal-dialog>

Kendini test et

Tekniği amacına eşleştir

shadowrootmode

SSR uyumlu shadow DOM
slot

Dış içeriği dağıt
form

Dış formu bağla
role

Erişilebilir rol ver

Modal erişilebilirlik özniteliğini tamamla

<modal-dialog role="dialog" ____="true" aria-label="Onay penceresi"><p>Kaydı sil</p></modal-dialog>

Cevabı göster

<modal-dialog role="dialog" aria-modal="true" aria-label="Onay penceresi"><p>Kaydı sil</p></modal-dialog>

Modal kartında shadow DOM ve slot birlikte kullanıldığında hangisi doğrudur?
```
<modal-dialog>
  <template shadowrootmode="open">
    <slot name="title"></slot>
  </template>
  <h2 slot="title">Başlık</h2>
</modal-dialog>
```
- Slot içeriği shadow DOM'a kopyalanır
- Yalnızca shadow DOM görüntülenir, slot yok sayılır
- Slot dışarıdan içerik alır, shadow DOM iskeleti saklar
- Slot ve shadow DOM çakışır, içerik silinir
Cevabı göster

Slot dışarıdan içerik alır, shadow DOM iskeleti saklar — Doğru. Shadow DOM iskeleti saklar, slot dışarıdan gelen içeriği doğru konuma dağıtır.

Sıradaki ders: Meydan okuma - Erişilebilir dialog

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler