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