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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html lang="tr"> <head> <title>İlk Web Sayfası</title> <style> h1::before{ content: ""; } </style> </head> <body> <h1>Merhaba Dünya!</h1> <p>Nasılsın?</p> </body> </html> |
Yukarıdaki HTML belgesi aşağıdaki DOM ağacına neden olacaktır.
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:
1 2 3 | <input type="range"> |
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.
1 2 3 4 5 6 7 | <span class="shadow-host"> <a href="https://twitter.com/accsharp"> Takip Et </a> </span> |
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.
1 2 3 4 | const shadowEl = document.querySelector(".shadow-host"); const shadow = shadowEl.attachShadow({mode: 'open'}); |
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ı.
1 2 3 4 5 6 7 8 | const link = document.createElement("a"); link.href = shadowEl.querySelector("a").href; link.innerHTML = ` <span aria-label="Twitter icon"></span> ${shadowEl.querySelector("a").textContent} `; |
appendChild() yöntemiyle, bu yeni öğeyi, gölge DOM’imize, herhangi bir öğeyi diğerine eklerken kullandığımız şekilde ekleriz.
1 2 3 | shadow.appendChild(link); |
Son olarak, bir <style> öğesi yaratarak ve onu gölge köküne ekleyerek bazı stiller ekleyebiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | const styles = document.createElement("style"); styles.textContent = ` a, span { vertical-align: top; display: inline-block; box-sizing: border-box; } a { height: 20px; padding: 1px 8px 1px 6px; background-color: #1b95e0; color: #fff; border-radius: 3px; font-weight: 500; font-size: 11px; font-family:'Helvetica Neue', Arial, sans-serif; line-height: 18px; text-decoration: none; } a:hover { background-color: #0c7abf; } span { position: relative; top: 2px; width: 14px; height: 14px; margin-right: 3px; background: transparent 0 0 no-repeat; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E); } `; shadow.appendChild(styles); |
İşte son:
Kaynak:
https://bitsofco.de/what-is-the-shadow-dom/
1 Yorum