Shadow DOM nedir?

Bu makale Shadow DOM'un ne olduğunu açıklar.

YouTube Video

Shadow DOM'u Anlamak

Shadow DOM, stiller ve DOM yapılarını bileşenler içinde kapsüllemenizi sağlayan Web Components standardının güçlü bir özelliğidir. Bu özellik, bileşenler ile ana belge arasındaki stil ve komut dosyası karışıklığını önler.

Shadow DOM nedir?

Shadow DOM, normal bir DOM elementine bağlanan sınırlandırılmış bir DOM ağacı oluşturmanın bir yolunu sağlar. Bu shadow ağacı genel belgeden izole edilmiştir; harici stiller ve komut dosyaları bunu etkileyemez ve dahili stilleri ile komut dosyaları da dışarı sızmaz.

Örneğin, Shadow DOM kullanarak bir özel düğme bileşeni oluşturursanız, stilleri sayfadaki diğer nesneleri etkilemez. Benzer şekilde, aynı sınıf adına sahip öğeler çakışmaz.

Shadow DOM'un Faydaları

1. Kapsülleme: Shadow DOM, stiller ve işlevsellikleri ayırır, küresel stiller ve komut dosyalarıyla çakışmaları önler.

2. Yeniden Kullanılabilirlik: Shadow DOM ile oluşturulan bileşenler, stil çakışmalarından endişe etmeden farklı projelerde yeniden kullanılabilir.

3. Bakım Kolaylığı: Kapsülleme, bileşenlerin mantık ve stiller açısından kendi kendine yeterli olmasını sağlar, bu da hata ayıklama ve bakımı kolaylaştırır.

Shadow DOM Oluşturmak

Shadow DOM kullanmak için bir HTML elemanına shadow root eklemeniz gerekir. İşte basit bir örnek:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Açıklama

1. Ana Eleman (Host Element): Shadow root'un eklendiği normal bir DOM elemanı (bu durumda #shadow-host).

2. Shadow Kökü (Shadow Root): attachShadow kullanılarak oluşturulan shadow ağacının kökü.

3. Mod: Açık (open) modda, dış JavaScript element.shadowRoot üzerinden shadow root'a erişebilir. Diğer yandan, kapalı (closed) mod erişime izin vermez.

Shadow DOM İçindeki Stil Tanımları

Shadow DOM kendi stil kapsama alanına sahiptir. Gölge ağacı içinde tanımlanan stiller yalnızca o ağaçtaki öğelere uygulanır. İşte bir örnek:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Ana belgede çakışan stiller olsa bile, gölge ağacındaki paragraflar etkilenmez:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Shadow DOM içindeki paragraflar yeşil kalırken, dış paragraflar kırmızı olur.

Shadow DOM içindeki olaylar

Shadow DOM içindeki olaylar, düzenli DOM olaylarına benzer, ancak kapsülleme nedeniyle yayılma açısından farklı davranabilir. Gölge ağacında meydana gelen olaylar ana öğeye kadar kabarcıklanabilir, ancak doğrudan tüm belgeye kabarcıklanmaz.

İşte bir örnek:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Düğmeye tıklandığında her iki dinleyici de tetiklenir ve olay kabarcıklanmasının davranışı gösterilir.

Slotlar: Light DOM içeriğinin dağıtımı

Slotlar, Light DOM'dan içeriği Shadow DOM'a yansıtmanıza olanak tanır. İşte bir örnek:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

Ana belgede şu şekilde yapabilirsiniz:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Shadow DOM içindeki slot öğeleri, ilgili slot niteliğine sahip Light DOM içeriğini görüntüler.

Sonuç

Shadow DOM, sağlam, yeniden kullanılabilir ve sürdürülebilir web bileşenleri oluşturmak için hayati bir araçtır. Stilleri ve işlevselliği kapsülleyerek uyuşmazlık olasılığını azaltır ve kod tabanı yönetimini basitleştirir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video