Bildirimsel Gölge DOM

Geleneksel gölge DOM, JavaScript ile (attachShadow) oluşturulur. Sunucu tarafından oluşturulan sayfalarda bu, JS çalışana kadar gölge ağacının boş kalması demektir; bu durum, ilk baytta eksiksiz HTML sunma amacını boşa çıkarır. Bildirimsel gölge DOM bu sorunu çözer.

shadowrootmode="open" içeren bir <template>, ayrıştırma sırasında HTML içinde bir gölge kökü bildirir. Tarayıcı gölge kökünü üst öğeye otomatik olarak bağlar; şablonun içeriği gölge ağacına dönüşür. JavaScript gerekmez.

Bildirimsel gölge DOM, gerçekten sunucu tarafından oluşturulan web bileşenlerini mümkün kılar: sunucu tam gölge ağacını satır içine gömülü olarak gönderir, tarayıcı bunu herhangi bir JS çalışmadan önce ayrıştırıp bağlar ve hidratasyon JS'si tam olarak oluşturulmuş bir temel üzerinden devralabilir. Böylece çerçevelerin SSR çözümleriyle eşit düzeye gelinir.

Buyurucu attachShadow ile aynı modlar kullanılır: shadowrootmode="open", gölge kökünü element.shadowRoot üzerinden erişilebilir kılar; shadowrootmode="closed" ise onu gizler. Davranış, JavaScript ile bağlanan karşılığıyla aynıdır.

Tarayıcı, <template shadowrootmode> öğesini ilk gördüğünde gölge kökünü bağlar. Bağlandıktan sonra şablon tüketilir; daha sonra şablon için sorgu yapıldığında hiçbir sonuç döndürülmez. Bu, attachShadow yaşam döngüsüyle uyumludur: bir gölge kökü, öğenin yaşam süresi boyunca var olur.

Işık alt öğeleri (örnekte <template> dışındaki <p> öğesi), buyurucu gölge DOM'da olduğu gibi gölge ağacının içindeki <slot> öğelerine yansır. Birleştirme modeli aynıdır; yalnızca bağlama mekanizması farklıdır.

<my-card> kayıtlı bir özel öğeyse yükseltme süreci, attachShadow'ı yeniden çağırmak yerine önceden bağlanmış gölge kökünü kullanır. Özel öğe sınıfı, onu oluşturmasına gerek kalmadan connectedCallback içinde this.shadowRoot değerini okuyabilir.

Lit-html'in render işlevi, Astro bileşenleri ve diğer bazı çerçeveler artık SSR çıktılarının bir parçası olarak bildirimsel gölge DOM üretir. Kendi çözümünüzü yazmanız da mümkündür: herhangi bir dize şablonlama sistemi shadowrootmode şablonunu yazabilir.

Bildirimsel gölge DOM, Chrome, Edge, Safari ve Firefox'ta kullanılabilir. Daha eski tarayıcılar <template> öğesini sessizce yok sayar; şablonun içeriği görünmez. Bu, desteklemeyen ortamlar için zarif bir geriye dönük uyumluluk sağlar.

Daha geniş destek için küçük bir betik DOM'u tarayarak template[shadowrootmode] öğelerini gerçek gölge köklerine dönüştürebilir. Sonraki bileşen yükseltmelerinin beklenen gölge ağacını görmesini sağlamak için bunu herhangi bir özel öğe kaydından önce çalıştırın.

Bildirimsel gölge DOM yapıyı yineler: <template> içeriği, bileşenin sınıfına da gömülü olmasına rağmen HTML içinde bulunur. Aynı bileşenden çok sayıda içeren sayfalarda bu durum yük boyutunu artırır. Çerçeveler yinelemeleri kaldırır; kendi SSR çözümünüzü yazıyorsanız aynı işlemi yapmak isteyebilirsiniz.

Web bileşenleri yayımlıyor ve ilk baytta oluşturma ya da SEO'ya önem veriyorsanız şimdi benimseyin. Bu özellik kararlı, destekleniyor ve web bileşeni tabanlı uygulamaların SSR yaklaşımını büyük ölçüde iyileştiriyor. Gölge DOM kullanmayan uygulamalar için geçerli değildir.

Bildirimsel gölge DOM, buyurucu attachShadow'a kıyasla hangi sorunu çözer?

Bildirimsel gölge DOM, ayrıştırma sırasında gölge kökü bağlamak için özel bir öğenin içinde <template shadowrootmode="open"> kullanır; JS gerekmez. Gölge ağacı, kapsamı sınırlandırılmış stiller ve yuvalar hidratasyondan önce çalıştığı için web bileşenleri için gerçek SSR sağlar. Tüm modern tarayıcılarda desteklenir; daha eski tarayıcılar için uyumluluk katmanı kullanılabilir. Çerçeveler (Lit, Astro) bunu otomatik olarak üretir.