Custom element isimleri

Öğe adlandırma kurallarını ve yedek içerik öğrenirsin.

Custom element adlandırması

Yeni bir HTML etiketi yaratırken onu custom element olarak adlandırırsın. Adın iki koşula uyması şart: küçük harfle yazılır ve içinde en az bir tire (-) bulunur. Örneğin <user-card> geçerli, <UserCard> veya <usercard> geçersizdir.

Tire, yerleşik etiketlerle çarpışmayı engeller ve ismi okunabilir kılar. Genelde iki kelimeli adlar seçilir: <blog-post>, <price-tag>, <nav-menu>. Bu biçime kebab-case denir.

Tanınmayan etiketlerde yedek içerik

Tarayıcı bilmediği bir etiket görünce onu yine de ayrıştırır; içeriğini gösterir ama özel davranış vermez. Bu yüzden <user-card>'ın içine yazdığın HTML, bileşen tanımlanana kadar yedek içerik gibi görünür.

Bu davranış, aşamalı geliştirmeye olanak tanır. JavaScript yüklenmeden bile sayfa anlamlıdır; bileşen hazır olunca slot ve shadow DOM devreye girer. Kullanıcı eski tarayıcıda bile boş bir kutu görmez.

Yerleşik etiketlerle çarpışma

Custom element adı, yerleşik HTML etiketleriyle (<p>, <div>) çarpışamaz. Tarayıcı önce yerleşik etiket olarak yorumlar; senin bileşenin çalışmaz.

Tire şartı bunu engeller: yerleşik etiketlerin hiçbiri tire içermez. <my-p> geçerli ama <p> yeniden tanımlanamaz. Bu sayede kod hem güvenli hem okunaklıdır.

Uygulama custom element iskeleti yaz

Body içine bir <user-card> custom element ekle. İçinde bir <h3> (metin: Ayşe) ve bir <slot> olsun. Slot'un yedek içeriği İletişim bilgisi yok olsun.

Örnek çözümü göster

<body>
  <user-card>
    <h3>Ayşe</h3>
    <slot>İletişim bilgisi yok</slot>
  </user-card>
</body>

Kendini test et

Hangisi geçerli bir custom element adıdır?
- <UserCard>
- <usercard>
- <user-card>
- <user_card>
Cevabı göster

<user-card> — Doğru. user-card küçük harfli ve tire içeriyor; kebab-case biçimine uyuyor.

Geçerli custom element adını yaz

<____>
  <slot></slot>
</user-profile>

Cevabı göster

<user-profile>
  <slot></slot>
</user-profile>

adlandırma şartlarını eşleştir

tire

adın içinde zorunludur
küçük harf

büyük harf kullanılamaz
kebab-case

tireli adlandırma biçimi
user-card

geçerli bir custom element

Sıradaki ders: Shadow DOM iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler