Shadow DOM Nedir? – Tasarım Kodlama
HTML

Shadow DOM Nedir?

Daha önceki yazıda DOM ne olduğunu yazmıştık. Özetlemek için, DOM (Belge Nesne Modeli) bir HTML belgesinin temsilidir. Sayfada ne oluşturulacağını belirlemek için tarayıcılar ve sayfanın içeriğini, yapısını veya stilini değiştirmek için Javascript programları tarafından kullanılır.

Örneğin, şu HTML belgesini alalım:

Yukarıdaki HTML belgesi aşağıdaki DOM ağacına neden olacaktır.

HTML DOM Ağacı

HTML DOM AğacıSon birkaç yılda, “Shadow DOM” ve “Virtual DOM” gibi terimler web dünyasını yakından takip edenlerin dilinde dolaşmaya başladı.  Bu makalede, DOM gölgesinin tam olarak ne olduğunu ve orijinal DOM’den nasıl farklı olduğunu anlatacağım.

Shadow DOM

Sayfadaki herhangi bir öğeye, belgenin ne kadar derinlemesine yerleştirildiğine veya yerleştirildiği yere bakılmaksızın document.querySelector() yöntemiyle erişilebilir. Benzer şekilde, belgeye uygulanan CSS, nerede olursa olsun, herhangi bir öğeyi seçebilir. DOM içinde herşey global olduğu anlamına gelir.

Bu davranış, tüm belgeye stil uygulamak istediğimizde gerçekten harika olabilir. Bir sayfadaki her bir öğeyi seçmek ve örneğin kutu boyutlandırmalarını tek bir satırda ayarlamak, inanılmaz derecede faydalıdır.

Web bileşenlerinin önemli bir yönü kapsüllemedir – işaretleme yapısını, stilini ve davranışını sayfadaki diğer kodlardan gizli ve ayrı tutabilmek, böylece farklı parçaların çakışmaması ve kodun güzel ve temiz tutulmasını sağlar.Bu da Shadow DOM’un global olmadığı anlamına gelir.  Shadow DOM API bunun bir parçası, gizli bir ayrılmış DOM’i bir elemana eklemenin bir yolunu sağlıyor. Bu makale, Shadow DOM’yi kullanmanın temellerini öğreneceksiniz.

DOM İçindeki  DOM

Shadow DOM “DOM içindeki bir DOM” olarak düşünebilirsiniz. Orijinal DOM’den tamamen izole edilmiş, kendi elemanları ve stilleriyle kendi izole edilmiş DOM ağacıdır.

Sadece son zamanlarda web yazarları tarafından kullanılmak üzere belirlenmiş olsa da, shadow DOM kullanıcı temsilcileri tarafından yıllardır form öğeleri gibi karmaşık bileşenler oluşturmak ve stil vermek için kullanılmıştır. Örneğin input range öğesini ele alalım. Sayfada bir tane oluşturmak için tek yapmamız gereken şu öğeyi eklemek:

Bu bir eleman aşağıdaki bileşenle sonuçlanır:

Daha derine inersek, bu <input> öğesinin aslında, birkaç küçük <div> öğesinden oluştuğunu göreceğiz.

Bu, Shadow DOM kullanarak elde edilir. Ana HTML belgesine içinde <input> belgesine sahiptir, ancak altında, DOM’in genel kapsamının bir parçasını oluşturmayan bileşenle ilgili öğeler ve stiller vardır.

Shadow DOM Nasıl Çalışır?

Shadow DOM’nin nasıl çalıştığını göstermek için, <iframe> yerine gölge DOM’yi kullanarak Twitter’ın “takip et” düğmesini oluşturalım.

İlk önce host shadow DOM eklemek istediğimiz orijinal DOM içindeki normal HTML öğesini oluşturalım. Takip Et düğmesi gibi bir bileşen için, Javascript sayfada etkin değilse veya DOM DOM desteklenmediyse görüntülenmesini istediğimiz geri dönüş öğesini de içerebilir.

Not: Yalnızca <a> öğesini gölge ana bilgisayar olarak kullanmadığımızı unutmayın; çünkü bazı öğeler, öncelikle etkileşimli öğeler, gölge ana bilgisayarlar olamaz.

Bir gölge DOM’yi ana bilgisayarımıza eklemek için attachShadow() yöntemini kullanıyoruz.

Bu, shadow-host çocuğu olarak boş bir gölge kökü oluşturacaktır. Gölge kökü, <html> öğesinin orijinal DOM’nin başlangıcı olduğu şekilde yeni bir gölge DOM’nin başlangıcıdır. Gölge kökümüzü tarayıcı denetçisinde #shadow-root ile görebiliriz.

Düzenli HTML çocukları denetçide görünse de, gölge kökü devraldıkça sayfada artık görünmezler.

Ardından, yeni gölge ağacımızı oluşturmak için içerik oluşturmak istiyoruz. Gölge ağacı DOM ağacı gibidir, ancak normal DOM yerine gölge DOM için. Takip butonumuzu oluşturmak için, ihtiyacımız olan tek şey, zaten sahip olduğumuz geri dönüş linki ile neredeyse aynı olacak, ancak bir ikon olacak şekilde yeni bir <a> elemanı.

appendChild() yöntemiyle, bu yeni öğeyi, gölge DOM’imize, herhangi bir öğeyi diğerine eklerken kullandığımız şekilde ekleriz.

Son olarak, bir <style> öğesi yaratarak ve onu gölge köküne ekleyerek bazı stiller ekleyebiliriz.

İşte son:

 

Kaynak:

https://bitsofco.de/what-is-the-shadow-dom/

 

 

1 Yorum

Yorum bırak