Sitemap
Frontend Development With JS

Frontend Development With Javascript

Follow publication

Photo by Anna Wangler on Unsplashc

Shadow DOM Nedir?

Önce DOM’u duyduk sonra Virtual DOM’u, Peki Shadow DOM Nedir ? Neyi Sağlar ?

4 min readApr 26, 2021

--

DOM ve Shadow DOM, W3C ‘nin internet ve web için koymuş olduğu standartlardandır.

Virtual DOM ise React ,Vue gibi UI Kütüphanelerinin tarayıcıya DOM API üzerinden erişimi azaltacak, geliştiricinin kodun hangi kısımlarında değişiklik olduğu ile ilgilenmeden kod yazmasını sağlayacak altyapıyı hazırlar.

Bunu da Virtual DOM ile gerçek DOM arasındaki farklılıklara göre optimize güncellemeyi otomatik yapmayı sağlayan farklı nodeları bulmasını sağlayan Diffing Algoritiması sayesinde gerçekleştirir. Virtual DOM , gerçek DOM bellekteki bir kopyası olarak düşünebilirsiniz. (Virtual DOM nasıl çalıştığı konusunda React ile DOM Kullanımı yazımı okuyabilirsiniz.)

DOM denilen (Document Object Model), HTML yapısını oluşturan elemanların ağaç yapısında tarayıcı tarafında tutulmasıdır. Zaten biz Frontend Geliştiricilerinin en çok üzerinde uğraştığı konularda bu DOM API üzerinden JS ile güncellemeler yaparak Web uygulamaları geliştirmektir. Bu konuda daha detaylı bilgi için (Modern Frontend Framework, DOM kullanım Yöntemleri yazımı okuyabilirsiniz.)

DOM ve Shadow DOM’un W3C ‘nin koyduğu standartlar olduğunu söylemiştik.

Shadow DOM

Shadow DOM Yapısı

Shadow DOM anlamak için önce Web Components kavramını biraz anlamak gerekiyor. Son dönemde Frontend Sektörüne hakim olan View kütüphaneleri (React, Vue, Svelte, Angular) ve ekosistemleri. En çok üzerinde durdukları konu ise Bileşen Yapısı (Component) yapısıdır. Bu bileşen yapısında söz sahibi olan, en güçlü bileşen yapısına sahip olan sektörede hakim olacaktır. Tüm bunlar Enterprise Web Uygulamaları geliştirmek için tekrar kullanabilirlik, sağlayacak güçlü bileşenleri geliştirme altyapısı kurma çabasıdır. Bildiğiniz gibi günümüzde en küçüğünden en büyüğüne Web Uygulamaları Bileşen Odaklı UI(Kullanıcı Arayüzü) Geliştirme yöntemleri ile geliştirilmekte.

Tüm bu kütüphanelerin yaklaşımları ve ekosistem hakimiyetlerine karşın Javascript, WebAPI native bir takım özellikler çıkararak bu yapıların belli gruplar içerisinde tekel olmasını engelleyerek genele yayılmasını sağlar.

Örneğin Asenkron işlemler için Async kütüphanesi yerine Promise ve Async/Await, Generator yapısının EcmaScript içerisine tanımlanması

Sunucu ile iletişimde Request, Axios vb.. kütüphaneler yerine Fetch API’nin gelmesi.

Bileşen yapısının tanımlanmasında JSX, CSS in JS kütüphaneler yerine yerine Template Literals yapılar

html`<p>Hello, ${this.name}!</p>`
css`p { color: blue }`;

React gibi dillerde bileşenlerin diğer bileşenleri tuttuğu yapıları oluşturabilecek React.Component veya bir fonksiyonun JSX dönmesi ile ReactDOM (Virtual DOM) üzerinden kurguladığı bileşen yapısını

  • Custom Elements: Kendinize ait span, div gibi HTML element oluşturabilme imkanı sunar. <myComponent>
  • HTML Templates: <template> ve<slot> elemanları ekrana o anda çizilmeyen template markup oluşturmanızı ve bunları custom elements oluştururken tekrar tekrar kullanabilme imkanı sunar.
  • Shadow DOM: DOM elemanlarından içerisinde kapsül halinde gizli bir DOM Tree yapısını Styling ile birlikte enjekte edebilmenizi sağlar. Bu yöntemi yukarıdaki yapılar ile birlikte kullanarak Web Component yapısı oluşturulabilir hale gelir.

Aşağıdaki Örnek MDN sitesinden alınmıştır.

Shadow DOM için MDN <popup-info …. ile yapılan bir bileşenini oluşturmamız gerekiyor. Bunun için bir kaç Shadow DOM fonksiyonundan bahsetmek lazım.

Öncelikle ShadowHost dediğimiz Node attachShadow yaparak ShadowRoot elemanlarını oluşturuyoruz.

let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});

open ile Shadow Host üzerinden oluşturulan Shadow Root daha sonrasında
let myShadowDom = myCustomElem.shadowRoot; ile erişebilirsiniz.

PopupInfo Element Shadow DOM yapısını oluşturalım.

Daha sonra bunu Custom Element olarak tanımlamamız gerekiyor.

popup-info bileşenini CustomElements tanımlama

HTML içerisinde popup-info bileşeni kullanalım.

html içerisinde bileşeni kullanalım

Bileşeni ekranda görüntülediğinizde Popup bileşenin düzgün bir şekilde çalıştığını görebilirsiniz.

Daha sonra bu elemanın içeriğine baktığımda shadow-root (open) kısmını görebilirsiniz. Bunu detayı görebilmek için Show User Agent Shadow DOM şeçeneğini “Settings” sayfasından aktif hale getirin.

Shadow Root

Not: Yukarıda her ne kadar Web Uygulaması geliştirme aşamasında bileşen yapısının çok çok önemli olduğunu söylesemde, tek başına bu yapı yeterli olmamaktadır. Yani React ile kıyaslarsam

  • Ekosistemin büyüklüğü ve yan kütüphanelerin gelişmiş olması (React Router, Redux, Middleware vb…)
  • React’ın sadece ClientSide rendering değil hem Server Side, hem Client Side hemde Hybrid yapıları destekler altyapısı ve bunun üzerine inşaa edilmiş Next benzeri hazır Framework’lerin olması
  • React’ın Cross Platform yapılar için Renderer sağlaması React-Native ve Electron vb…
  • Bileşen yapılarında Virtual DOM üzerinden Diffing Algoritmasının geliştiricileri iyi bir soyutlama sağlayarak olaylara bileşen bakışı açısı ile bakabilme imkanı sunması ve ekranın stabil güncellenmesini otomatik olarak gerçekleştirmesi.

Bu arada bu yazı tamda Lit 2.0 kütüphanesinin çıkısı zamanında çıktı 😃 Google bu konuda daha önceden LitElement , lit-html, Polymer ve WebComponent bileşen kütüphane çalışmaları olmuştu. Bakalım Lit2.0 ile ekosistemde bekledikleri ilgiliyi yakalayabilecekler mi ?

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

No responses yet