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

Sıradaki ders: Slot ve shadow boundary

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler