customElements.define ile Öğeleri Tanımlama
Bir özel öğe sınıfını tarayıcıya kaydedin
customElements.define ile Öğeleri Tanımlama, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Özel Öğeler Nedir?
Özel öğeler, bir JavaScript sınıfıyla desteklenen kendi HTML etiketlerinizi oluşturmanızı sağlar. Tanımlandıktan sonra <my-card>, yerleşik tüm öğeler gibi davranır: HTML içinde yazılabilir, sorgulanabilir, stillendirilebilir, betiklerle kullanılabilir ve çerçeveler içinde değişiklik yapılmadan kullanılabilir.
Tire Gereksinimi
Her özel öğe adı en az bir tire içermelidir — user-avatar, app-button, my-card. Tire, özel öğeleri mevcut ve gelecekteki yerleşik HTML etiketlerinden ayırır ve bu kural belirtim tarafından zorunlu kılınır.
Bir Sınıf Tanımlama
Özel öğe, HTMLElement'i (veya yerleşik bir alt sınıfı) genişleten bir sınıftır. Sınıf bir kurucu ve yaşam döngüsü geri çağırmalarını bildirebilir. Sınıftaki herkese açık özellikler ve yöntemler, öğenin betik arayüzünü oluşturur.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}define ile Kaydetme
customElements.define("my-card", MyCard), sınıfı etiket adı altında kaydeder. Kayıttan sonra belgede bulunan ve daha sonra eklenen her <my-card>, sınıfın bir örneğine dönüştürülür.
super() Zorunludur
Kurucu, this'e dokunmadan önce ilk ifadesi olarak super()'ı çağırmalıdır. super() çağrısının atlanması "Failed to construct 'HTMLElement'" hatasını verir. Bunu, standart JavaScript sınıf kurucusu kuralı olarak ele alın.
Kurucuda DOM Okuması Yapmayın
Kurucu, öğenin özniteliklerini veya alt öğelerini okuyamaz; kurulum sırasında bunlar henüz ayrıştırılmamış olabilir. DOM'a dokunan kurulumu, yalnızca öğe belgeye eklendikten sonra çalışan connectedCallback içine taşıyın.
Kayıt Kalıcıdır
Bir öğe adı her sayfa için yalnızca bir kez kaydedilebilir. Aynı adı yeniden tanımlamak NotSupportedError hatası verir. Geliştirme sırasında değişiklikleri test etmek için sayfayı yeniden yükleyin; üretimde her bileşeni başlangıçta bir kez kaydedin.
Polyfill'ler
Özel öğeler tüm modern tarayıcılarda yerel olarak bulunur. Çok eski tarayıcılar (çoğunlukla artık kullanılmayanlar) için webcomponents.js polyfill'i bir yedek sağlar. Yeni projeler yerel desteği kullanabilir ve polyfill'i tamamen atlayabilir.
Tanım Durumunu Algılama
customElements.get("my-card"), tanımlanmışsa sınıfı, aksi takdirde undefined değerini döndürür. customElements.whenDefined("my-card"), öğe kaydedildiğinde çözülen bir vaat döndürür; geç yüklenen tanımların tamamlanmasını beklemesi gereken kodlar için kullanışlıdır.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Öğeyi Kullanma
Tanımlandıktan sonra öğeyi yerleşik bir etiket gibi kullanın: HTML içinde yazın (<my-card></my-card>), document.createElement("my-card") ile oluşturun veya new MyCard() ile örneklendirip ekleyin. Her üç yol da aynı dönüştürülmüş örneği üretir.
Adlandırma Kuralları
Aynı sayfadaki diğer kitaplıklarla çakışmaları önlemek için özel öğelere bir proje veya şirket adıyla önek verin (cd-card, app-modal). Web bileşeni ekosistemi paketlenmemiştir; sayfanızdaki herkes herhangi bir adı kaydedebilir ve ilk kayıt kazanır.
Bilgi Kontrolü
Her özel öğe adının neden bir tire içermesi gerekir?
Özet
Özel öğeler, HTMLElement'i genişleten ve adında tire bulunması gereken customElements.define("name", Class) aracılığıyla kaydedilen JavaScript sınıflarıdır. Kurucu önce super() çağrısını yapmalı ve DOM'u okumamalıdır; DOM işlemlerini connectedCallback'e erteleyin. Tanımlanan öğeler her yerde yerleşik etiketler gibi davranır.
Sıkça Sorulan Sorular
“customElements.define ile Öğeleri Tanımlama” dersi ücretsiz mi?
Evet — “customElements.define ile Öğeleri Tanımlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“customElements.define ile Öğeleri Tanımlama” dersinde ne öğreneceğim?
Bir özel öğe sınıfını tarayıcıya kaydedin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“customElements.define ile Öğeleri Tanımlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- customElements.define ile Öğeleri Tanımlama
- connectedCallback ve disconnectedCallback
- İzlenen Öznitelikler ve attributeChangedCallback
- Yerleşik Öğeleri Genişletme