Yükleniyor...

HTML Özel Elemanlar

HTML Özel Elemanlar (Custom Elements), Web Components standardının bir parçasıdır ve geliştiricilere kendi HTML etiketlerini tanımlama imkanı sunar. Bir evi inşa ederken her odayı belirli bir amaç için özel şekilde tasarlamak gibi, özel elemanlar da web sayfanızı modüller halinde bölümlere ayırmanızı sağlar. Bu yaklaşım, komponentlerinizi bağımsız ve yeniden kullanılabilir hale getirir.
Kişisel web sitesi oluştururken <profile-card> gibi bir elemanla tanıtım kartı oluşturabilirsiniz; blogunuzda <blog-post-preview> elementi öne çıkan yazılar için ideal; e‑commerce projesinde <product-card> ile ürünleri sergileyebilirsiniz; haber sitesinde <news-item> ile başlık ve özetler; platform sitesi için <user-avatar> tipi komponentler kurumsal ve tutarlı bir yapı sunar. Bu yapı, yazılan kodun tekrarını azaltır, okunabilirliği artırır ve bakımını kolaylaştırır.
Bu referans rehberde, özel elemanların nasıl tanımlandığını, kayıt edildiğini ve DOM’a eklendiğinde nasıl çalıştığını göreceksiniz. Ayrıca, lifecycle callback’leri (örneğin connectedCallback() ve disconnectedCallback()), attribute gözlemleme ve yönetme gibi ileri düzey konseptleri ele alacağız. Kod örnekleri bağımsız çalışabilir yapıda ve gerçek dünya senaryolarına uygundur. Öğrendiklerinizle, kendi bileşen kütüphanenizi yazabilir, yapısal olarak düzgün ve sürdürülebilir projeler inşa edebilirsiniz.

Temel Örnek

html
HTML Code
<!-- Define a simple custom element -->

<script>
class WelcomeBanner extends HTMLElement {
connectedCallback() {
this.innerHTML = "<h2>Hoş geldiniz!</h2>";
}
}
customElements.define("welcome-banner", WelcomeBanner);
</script>

<welcome-banner></welcome-banner>

Bu temel örnek üç ana bölümden oluşur. İlk olarak WelcomeBanner adında bir sınıf tanımlanır ve bu sınıf HTMLElement sınıfını kalıtım alır. Böylece elementiniz HTML standardına entegre olmuş olur. connectedCallback() ise component’in yaşam döngüsünün bir parçası olarak DOM’a eklendiğinde tetiklenir ve burada innerHTML kullanılarak içerik eklenir.
customElements.define("welcome-banner", WelcomeBanner) satırı özel elementi tarayıcıya kaydeder. Önemli bir nokta: eleman adının mutlaka bir tire (-) içermesi gerekir; aksi takdirde HTML standardına uygun olmaz ve tarayıcı elementi tanımaz. Bir kez kaydedildiğinde <welcome-banner> etiketi normal bir HTML elementi gibi davranır ve tanımlanan içerikle render edilir.
Başlangıçta <div> etiketi kullanmak yeterli gibi görünse de özel elemanlar bileşiğin yapı, stil ve davranışını tek bir yerde toplar. Bu, bir mektup gibi yazılıp birçok kez gönderilebilecek içerikler üretmenizi sağlar: tek bir tanımlama, birden çok kullanım.

Pratik Örnek

html
HTML Code
<!-- product-card element for e‑commerce -->

<script>
class ProductCard extends HTMLElement {
connectedCallback() {
const name = this.getAttribute("name") || "Ürün İsmi";
const price = this.getAttribute("price") || "Fiyat bilinmiyor";
this.innerHTML = `
<div class="card">
<h3>${name}</h3>
<p>Fiyat: ${price} TL</p>
</div>`;
}
}
customElements.define("product-card", ProductCard);
</script>

<product-card name="Kahve Makinesi" price="1299"></product-card>

En İyi Uygulamalar ve Yaygın Hatalar
En İyi Uygulamalar:

  1. Semantic HTML kullanımı: <article>, <section>, <header> gibi etiklerle yapıyı anlamlı kılın.
  2. Erişilebilirlik (Accessibility): ARIA atributlerini kullanarak ekran okuyucular için içeriği erişilebilir hale getirin (örneğin aria-label).
  3. Temiz işaretleme: Stil, yapı ve mantığı net şekilde ayırın. CSS dış dosyada, JavaScript mantıkta, HTML eleman içeriğini tanımlar.
  4. Yeniden kullanılabilirlik: Verileri attribute üzerinden geçirin ve sabit kod yazmaktan kaçının.
    Yaygın Hatalar:

  5. Tire içermeyen element adı (<productcard>) standart dışıdır.

  6. Attribute kontrolü yapılmadan getAttribute() kullanılması boş veri veya hata oluşturabilir.
  7. Elements uygunsuz yerlerde kullanılabilir; örneğin <ul> içinde doğrudan <product-card> koymak sorun yaratabilir.
  8. disconnectedCallback() içinde event listener veya timer temizlenmezse hafıza sızıntısı oluşur.
    Debug Tavsiyeleri:
  • connectedCallback() ve attributeChangedCallback() içine console.log() ekleyerek akışı takip edin.
  • Elementin tanınıp tanınmadığını customElements.get("product-card") ile kontrol edin.
  • Tarayıcı geliştirici araçlarıyla DOM yapısını inceleyin.
    Pratik Öneri:
    Özel elementleri modüler yapılar olarak düşünün — her biri bağımsız çalışır, isimlendirmesi anlamlıdır ve farklı projelerde tekrar kullanılabilir.

📊 Hızlı Referans

Property/Method Description Example
customElements.define() Özel elementi kaydeder customElements.define("my-tag", MyClass)
connectedCallback() Element DOM’a eklendiğinde çağrılır this.innerHTML = "…"
disconnectedCallback() Element DOM’dan kaldırıldığında çağrılır listener temizle veya timer durdur
observedAttributes Gözlemlenecek atributler listesi static get observedAttributes() { return \["name"] }
attributeChangedCallback() Atribut değiştiğinde tepki verir yeni değere göre UI güncelle
HTMLElement Tüm özel elementlerin temel sınıfı class MyElement extends HTMLElement

Özet ve Sonraki Adımlar
HTML Özel Elemanlar, modern web geliştirmede bileşen bazlı mimari oluşturmanın standart yoludur. Bu tutarlı yapıyla, yapılandırılmış, anlaşılır ve sürdürülebilir projeler inşa edebilirsiniz. Başlangıç seviyesinde sınıf tanımlama, lifecycle kullanımı ve attribute yönetimi konularını kavradınız; bunları e‑commerce, blog veya portföy gibi senaryolarda nasıl uygulayabileceğinizi gördünüz.
Özel elemanlar CSS ile stil uygulanabilir ve JavaScript ile etkileşim oluşturulabilir. Bir sonraki adım olarak Shadow DOM ile stil kapsülleme, HTML Templates kullanımı ve Slots ile içerik dağıtımı konularını derinlemesine inceleyebilirsiniz.
Kendi özel elementlerinizi geliştirerek projelerinizde kullanın — her biri özenle yazılmış bir mektup gibi, net, etkili ve yeniden kullanılabilir. Zamanla kendi küçük bileşen kütüphanenizi oluşturabilirsiniz.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

3
Sorular
🎯
70%
Geçmek İçin
♾️
Süre
🔄
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek