attachShadow ve Gölge Kökü
Bir ana öğe üzerinde kapsüllenmiş bir gölge ağacı oluşturun
attachShadow ve Gölge Kökü, 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.
Shadow DOM Nedir?
Shadow DOM, bir öğeye sayfanın ana DOM'unda görünmeyen, yalıtılmış bir DOM ağacı (gölge ağacı) verir. Dış CSS içeri sızmaz, iç CSS de dışarı çıkmaz; bu, bileşenler için kusursuz bir kapsülleme sağlar.
Gölge Kökü Ekleme
Özel öğenin kurucusundan veya connectedCallback içinden this.attachShadow({ mode: "open" }) çağrısını yapın. Bu yöntem, normal bir DOM ağacı gibi innerHTML, appendChild ve benzerlerini kullanarak doldurabileceğiniz bir ShadowRoot döndürür.
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
}
}Açık ve Kapalı Mod
mode: "open", gölge ağacını element.shadowRoot olarak dışa açar. mode: "closed" ise onu gizler; element.shadowRoot null döndürür, böylece dış betikler ağaca giremez. Kapalı mod pratikte nadiren kullanışlıdır; çünkü öğeyi tanımlayan aynı kod yine de kendi başvurusunu tutabilir.
Stil Kapsüllemesi
Gölge ağacının içinde tanımlanan stiller (<style> veya benimsenen stil sayfaları aracılığıyla) yalnızca o gölge ağacının içinde uygulanır. Ana belgedeki CSS seçicileri gölgenin alt öğeleriyle asla eşleşmez; gölgenin stilleri de belgeye dışarı taşmaz.
:host Seçicisi
Gölge ağacının içinden, ana öğe (özel öğenin kendisi) özel :host sözde sınıfıyla seçilir. :host(.large), ana öğede .large sınıfı olduğunda; :host([disabled]) ise ana öğede disabled özniteliği olduğunda eşleşir.
:host {
display: block;
padding: 16px;
border: 1px solid #ccc;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}Özel Öğelerde Blok Görüntüleme
Özel öğelerin varsayılan görünümü display: inline değeridir. Öğenin blok düzeyinde bir bileşen gibi davranması için gölge kökün içinde :host { display: block } uygulayın. Bunu unutmak, genişliğin yüzde yüz olmasının yok sayılmasıyla ilgili hataların yaygın bir nedenidir.
Olay Bileşimi
Gölge ağacından dışarı kabarcıklanan olayların hedefi ana öğe üzerinde yeniden belirlenir. İçteki bir düğmeye tıklama, dış dinleyicilere event.target === host olarak ulaşır. Gerçek iç hedefi görmek istiyorsanız event.composedPath() kullanın.
Özel Olaylar için composed: true
Gölge kökü içinde gönderilen özel olaylar, onları hem bubbles: true hem de composed: true ile oluşturmadığınız sürece sınırı aşmaz. composed olmadan, barındırıcı üzerindeki dış dinleyiciler olayı hiçbir zaman göremez.
Betikler İçeri Sızamaz
Dışarıdaki betikler barındırıcı öğeyi sorgulayabilir, ancak onun gölge alt öğelerini sorgulayamaz. Gölge ağacında bir <span> varsa document.querySelector("my-card span") hiçbir şey döndürmez. Kapsülleme, iç ayrıntıları kazara oluşabilecek bağımlılıklardan korur.
Bildirimsel Gölge DOM
Bir öğenin HTML'i içinde <template shadowrootmode="open"> bulunduğunda tarayıcı, JavaScript olmadan ayrıştırma sırasında gölge ağacını oluşturur. Bu, sunucu tarafından oluşturulan bileşenleri hidratasyona elverişli hâle getirir; çünkü JS çalışmadan önce gölge ağacı zaten vardır.
Performansla İlgili Hususlar
Her gölge kökünün bir maliyeti vardır: ek stil kapsamı ve ek işleme katmanı. Yüzlerce gölge kökü sorun oluşturmaz; on binlerce gökün etkisi görülebilir. Çok yüksek yoğunluklu kullanıcı arayüzlerinde (büyük tablolar, sanallaştırılmış listeler) gölge DOM maliyetlerinin kabul edilebilir olduğunu doğrulamak için profil oluşturun.
Bilgi Kontrolü
Açık mod, kapalı modun sunmadığı neyi sağlar?
Özet
attachShadow({ mode: "open" }), CSS ve kimliklerin iki yöne de sızmadığı yalıtılmış bir DOM alt ağacı oluşturur. Barındırıcıyı :host ile biçimlendirin, display: block kullanmayı unutmayın ve dışarı çıkması gereken olaylar için composed: true kullanın. Gölge ağacı bunun dışında normal bir DOM gibi davranır — innerHTML, appendChild ve querySelector içeride normal şekilde çalışır.
Sıkça Sorulan Sorular
“attachShadow ve Gölge Kökü” dersi ücretsiz mi?
Evet — “attachShadow ve Gölge Kökü” 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.
“attachShadow ve Gölge Kökü” dersinde ne öğreneceğim?
Bir ana öğe üzerinde kapsüllenmiş bir gölge ağacı oluşturun 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.
“attachShadow ve Gölge Kökü” 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