Ö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.