İçerik Dağıtımı için Slot Öğeleri
Ana öğe içeriğini adlandırılmış ve varsayılan slot'larla gölge DOM'a yansıtın
İçerik Dağıtımı için Slot Öğeleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. 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.
Hafif DOM ve Gölge DOM
HTML içinde özel bir öğenin içine yazılan alt öğeler, öğenin "hafif DOM"unu oluşturur; bunlar gölge ağacında yer almaz. Tarayıcı bunları varsayılan olarak görüntülemez; gölge ağacının bunları <slot> aracılığıyla açıkça istemesi gerekir.
Varsayılan Slot
Gölge ağacının içindeki bir <slot> öğesi, hafif alt öğelerin görüneceği yeri belirtir. Bir adı olmadığında varsayılan slot'tur ve barındırıcının doğrudan alt öğelerini kabul eder.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Adlandırılmış Slotlar
Birden çok slot, adlarıyla hedeflenebilir. Gölge ağacı <slot name="header"> tanımlar; kullanıcı <h1 slot="header"> ile bunu seçer. Eşleşen slot özniteliğine sahip alt öğeler o slotu doldurur; eşleşmeyen alt öğeler varsayılan slota düşer.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Slot Yedek İçeriği
Slot etiketleri arasındaki içerik yalnızca o slota hiçbir şey atanmadığında görüntülenir: <slot>No content provided</slot>. Boş slotlar için yer tutucu veya yönerge metni göstermek amacıyla kullanın.
Slotlar Arasında Stil Devralma
Slota yerleştirilmiş alt öğeler hafif DOM'da kalır ve stilleri gölge ağacından değil, ana belgeden devralır. Bunları biçimlendirmek için gölgenin içinden ::slotted() sözde öğesini kullanın: ::slotted(p) { color: red; }.
::slotted Sınırlamaları
::slotted() yalnızca barındırıcının doğrudan alt öğelerini, yani gerçekten slota dağıtılan öğeleri hedefleyebilir. Bu öğelerin alt öğelerini hedefleyemez. Daha derin biçimlendirme için CSS özel özelliklerini dışa açın veya bunun yerine gölge içindeki öğelerde ::part kullanın.
Slot Değişikliklerini Algılama
Her slot, kendisine atanmış düğümler değiştiğinde bir slotchange olayı tetikler. Dinamik içerik güncellemelerine tepki vermek için bu olayı dinleyin: slot.addEventListener("slotchange", handler). Bu, düzeni hangi alt öğelerin mevcut olduğuna bağlı olan bileşenler için kullanışlıdır.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes ve assignedElements
slot.assignedNodes(), bir slota atanmış tüm düğümleri döndürür (metin düğümleri dâhil). slot.assignedElements() yalnızca öğe alt öğelerini döndürür; slota yerleştirilmiş içerik üzerinde programlı olarak yineleme yaparken genellikle istediğiniz sonuç budur.
Alt Öğeleri Dağıtma
Tarayıcı, tüm dağıtımı her alt öğedeki slot özniteliğine göre otomatik olarak gerçekleştirir. Bunun için bir JavaScript adımı yoktur; barındırıcının hafif alt öğelerine <span slot="footer">...</span> yazmanız yeterlidir, karşılık gelen gölge slotu bunu içerir.
Slotlar ve Barındırıcıyı Biçimlendirme
Barındırıcının belgede <my-card> üzerine uygulanan kendi stilleri, slota yerleştirilenler dâhil hafif alt öğelere basamaklı olarak uygulanır. Her ikisi de aynı özelliği hedeflediğinde, ::slotted aracılığıyla uygulanan gölge CSS'si devralınan barındırıcı stillerinden daha yüksek özgüllüğe sahiptir.
Yaygın Kullanım Alanları
Başlık/gövde/altbilgi slotlarına sahip kartlar, başlık/içerik/eylem slotlarına sahip iletişim kutuları, başta/sonda slotları olan liste öğeleri ve öğe slotlarına sahip gezinme menüleri. Slotlar, özel öğeleri <details>/<summary> veya <table>/<tr> çiftlerinde olduğu gibi birleştirilebilir hâle getirir.
Bilgi Kontrolü
Varsayılan slot ile adlandırılmış slot arasındaki fark nedir?
Özet
Slotlar, hafif DOM alt öğelerini gölge ağacındaki belirli yerlere yansıtır. Varsayılan slot, adı olmayan her alt öğeyi alır; adlandırılmış slotlar, eşleşen slot özniteliklerine sahip alt öğeleri alır. Yedek içerik boş slotları doldurur, ::slotted doğrudan slota yerleştirilmiş alt öğeleri biçimlendirir ve slotchange olayları dinamik içerik güncellemelerine tepki verir.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“İçerik Dağıtımı için Slot Öğeleri” dersi ücretsiz mi?
Evet — “İçerik Dağıtımı için Slot Öğeleri” 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.
“İçerik Dağıtımı için Slot Öğeleri” dersinde ne öğreneceğim?
Ana öğe içeriğini adlandırılmış ve varsayılan slot'larla gölge DOM'a yansıtın 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 2. dersidir.
“İçerik Dağıtımı için Slot Öğeleri” 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
- attachShadow ve Gölge Kökü
- İçerik Dağıtımı için Slot Öğeleri
- Gölge DOM İçinde Kapsamlı Stiller
- Harici Stilleme için Part ve Exportparts