Custom element registry
customElements API'sinin HTML tarafını (isim kuralları, yedek) öğrenirsin.
Custom element nedir?
Custom element (özel eleman), HTML sözlüğüne kendi etiketini eklemektir. Tarayıcı <profile-card> gibi bir etiketi görünce önce bilinmeyen eleman olarak işler; customElements.define() çağrısı yüklenince elemanı yükseltir (upgrade).
İsimlendirme basittir: küçük harf ve en az bir tire (-) içermeli. profile-card geçerli; ProfileCard büyük harf, card tire olmadığı için geçersiz. Böylece yerleşik etiketlerle çarpışmaz.
Yedek içerik ve HTMLUnknownElement
JavaScript yüklenmeden önce tarayıcı, tanımlanmamış bir custom elementi HTMLUnknownElement olarak işler. İçerik yine de görünür kalır; yalnızca özel davranış ve stiller eksiktir.
Bu yüzden custom element içine yedek (fallback) içerik koymak iyi bir uygulamadır. Betik yüklenmese bile kullanıcı anlamlı bir şey görür: <profile-card> içinde bir <img>, bir <h2> ve bir <p> olduğunda kart, JS olmadan da okunabilir.
Uygulama Yedek içerikli profile-card yaz
Basit bir <profile-card> custom elementi yaz. İçinde şunlar olsun:
- Açılış etiketi:
<profile-card> - Bir
<img>— src ve alt özniteliği dolu (avatar) - Bir
<h2>— içeriği dolu (isim) - Bir
<p>— içeriği dolu (biyografi) - Kapanış etiketi:
</profile-card>
JS yüklenmese de kart okunabilir olmalı.
Örnek çözümü göster
<profile-card>
<img src="/kullanici/ayse/avatar.png" alt="Ayşe Yılmaz avatarı">
<h2>Ayşe Yılmaz</h2>
<p>Ürün tasarımcısı, İstanbul'da yaşıyor.</p>
</profile-card>Kendini test et
-
Hangisi geçerli bir custom element adıdır?
- ProfileCard
- usercard
- user-card
- User-Card
Cevabı göster
user-card — Doğru. user-card küçük harf ve bir tire içeriyor; geçerli.
-
Custom element etiketini tamamla
<____>Ayşe Yılmaz</profile-card>Cevabı göster
<profile-card>Ayşe Yılmaz</profile-card> -
Custom element adını amacına eşleştir
- profile-card
- Kullanıcı bilgileri
- weather-widget
- Hava durumu
- cart-item
- Sepet ürünü
- rating-stars
- Puan göstergesi