Web bileşenleri: özel öğeler ve Shadow DOM
Çerçeve kullanmadan özel öğeler, şablonlar ve Shadow DOM ile yeniden kullanılabilir, erişilebilir ve forma katılabilen bileşenler yazarsın.
Seviye 401 · 14 ders · 12 pratik lab
Dersler
Temeller
- Özel öğe tanımlamak: customElements.define
- Yaşam döngüsü geri çağrıları
- Öznitelikler, özellikler ve yansıtma
- template ve slot ile içerik yerleştirmek
- Kısa görev: bir rozet bileşeni
Shadow DOM
- Shadow DOM ve stil kapsülleme
- ::part, ::slotted ve CSS değişkenleriyle dışarıdan stil
- Olaylar: bubbles, composed ve özel olaylar
- Forma katılan bileşenler: ElementInternals
- Bileşende erişilebilirlik: rol ve odak
- Kısa görev: klavyeyle çalışan sekme bileşeni
Dağıtım
- Bildirimsel Shadow DOM ve sunucuda çizim
- Bileşenleri tarayıcıda sınamak
- Bitirme görevi: küçük bir bileşen kitaplığı
Pratik lablar
- Rozet bileşeni tanımla: Duruma göre renk alan bir durum-rozeti özel öğesi yaz ve sayfada üç farklı durumla kullan.
- Öznitelik değişince güncelle: observedAttributes ve attributeChangedCallback ile sayaç bileşeninin değerini özellik ve öznitelik arasında yansıt.
- Bağlantı kesilince temizlik yap: Saat bileşeni sayfadan kaldırılınca zamanlayıcı çalışmaya devam ediyor; yaşam döngüsü geri çağrılarıyla sızıntıyı kapat.
- Stili Shadow DOM ile kapsülle: Sayfanın genel stilleri kart bileşenini bozuyor; bileşeni Shadow DOM'a taşıyıp etkiyi kes.
- Dışarıdan ::part ile özelleştir: Uyarı bileşeninin başlık ve düğmesini part ile açığa çıkar ve iki farklı temada biçimlendir.
- slot içeriğini düzenle: Adlandırılmış slotlarla ürün kartı yaz, ::slotted ile biçimlendir ve boş slot durumunu ele al.
- Özel olay yayınla: Yıldız puanlama bileşeni seçim yapılınca puanı taşıyan özel bir olay yayınlasın ve sayfa bunu dinlesin.
- Bileşeni forma bağla: ElementInternals ile tarih seçici bileşeninin değerini forma göndermesini ve doğrulamaya katılmasını sağla.
- Klavye dostu sekme bileşeni yaz: Ok tuşlarıyla gezinilen, doğru rolleri taşıyan ve odak yönetimi yapan bir sekme bileşeni yaz.
- Bileşeni tarayıcıda test et: Rozet bileşeni için öznitelik değişimini ve olay yayınını doğrulayan üç test yaz.
- Bildirimsel Shadow DOM ile sunucuda çiz: Bileşenin ilk görünümünü template shadowrootmode ile HTML'e göm, JavaScript yokken de göründüğünü kanıtla.
- Küçük bileşen kütüphanesi çıkar: Düğme, uyarı ve modal bileşenlerini ortak tema değişkenleri ve belgelerle tek pakette topla.
Kurs hakkında
Çerçeve kullanmadan özel öğeler, şablonlar ve Shadow DOM ile yeniden kullanılabilir, erişilebilir ve forma katılabilen bileşenler yazarsın.
Ne öğreneceksin
- Temeller
- Shadow DOM
- Dağıtım
Ön koşullar
Aynı yolun 301 düzeyine kadar olan konularını uygulamış olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 401 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.