Custom elements
customElements.define ile kendi HTML öğeni oluşturmayı öğrenirsin.
Custom elements
Custom elements ile kendi HTML etiketlerini tanımlarsın. <my-button> gibi özel bir etiket oluşturup, normal HTML öğesi gibi kullanabilirsin. Bu, tasarım sistemlerinin ve bileşen kütüphanelerinin temelidir.
Bir custom element, HTMLElement sınıfından türetilmiş bir sınıftır. customElements.define(name, class) ile kaydedersin. Ad mutlaka kısa çizgi içermelidir; böylece tarayıcı onu standart etiketlerden ayırır.
Tanımlama ve yaşam döngüsü
Bir custom element şöyle tanımlanır:
class MyAlert extends HTMLElement {
connectedCallback() {
this.textContent = 'Merhaba';
}
}
customElements.define('my-alert', MyAlert);Tarayıcı, öğe DOM'a eklendiğinde connectedCallback'i çağırır. Bu, başlangıç kurulumu için en sık kullanılan yerdir. Yaşam döngüsü callback'leri şunlardır: connectedCallback (eklenince), disconnectedCallback (çıkarılınca), attributeChangedCallback (öznitelik değişince) ve adoptedCallback (yeni belgeye taşınır).
Bu callback'ler isteğe bağlıdır; yalnızca ihtiyacın olanı yazarsın.
observedAttributes
Varsayılan olarak attributeChangedCallback hiç tetiklenmez. Hangi öznitelikleri izleyeceğini observedAttributes adlı statik bir getter ile bildirmelisin:
static get observedAttributes() {
return ['open'];
}Bu performans içindir; tarayıcı her öznitelik değişikliği için değil yalnızca listedekiler için callback çağırır. Callback üç parametre alır: name, oldValue ve newValue.
Uygulama my-toast bildiri öğesi tanımla
my-toast adlı bir custom element tanımla. Sınıf HTMLElement'i genişletsin, connectedCallback içinde this.textContent'e bir değer ata ve customElements.define ile kaydet.
Örnek çözümü göster
1. HTMLElement'i genişleten MyToast sınıfını yaz.
2. connectedCallback metodu içinde this.textContent'e bir değer ata.
3. customElements.define ile 'my-toast' adıyla kaydet.
Örnek çözüm:
class MyToast extends HTMLElement {
connectedCallback() {
this.textContent = 'Gönderildi';
}
}
customElements.define('my-toast', MyToast);Kendini test et
-
Bir custom element adında neden kısa çizgi olmak zorundadır?
- Daha okunaklı görünsün diye
- CSS seçiciyle çakışmasın diye
- Daha kısa olsun diye
- Tarayıcı onu standart etiketlerden ayırsın diye
Cevabı göster
Tarayıcı onu standart etiketlerden ayırsın diye — Doğru. Kısa çizgi, custom element ile standart HTML etiketlerini birbirinden ayırır.
-
Custom element'i kaydet
customElements.define('my-alert',____);Cevabı göster
customElements.define('my-alert',MyAlert); -
Yaşam döngüsü callback'lerini eşleştir
- connectedCallback
- DOM'a eklenince
- disconnectedCallback
- DOM'dan çıkarılınca
- attributeChangedCallback
- Öznitelik değişince
- adoptedCallback
- Yeni belgeye taşınır