Shadow DOM nedir?

Shadow DOM, bir bileşenin içinde DOM ve CSS'yi kapsüllemeye olanak tanıyan bir web standardıdır. Ayrı, izole bir DOM ağacı oluşturur, buna "gölge ağacı" (shadow tree) denir ve ana belgede bir öğeye eklenir, buna "gölge kök" (shadow root) denir.

Shadow DOM'un avantajları:

• CSS İzolasyonu: Shadow DOM içinde tanımlanan stiller "sızmaz" ve ana belgeyi etkilemez, ve varsayılan olarak, ana belgeden gelen stiller Shadow DOM'u etkilemez.
• DOM İzolasyonu: Shadow DOM yapısı ana belgeden gizlidir ve standart seçim yöntemleriyle (örneğin, querySelector) erişilemez.
• JavaScript İzolasyonu: Ana belgede çalışan betikler, Shadow DOM içindeki öğelere kolayca erişemez.
• Yeniden Kullanım: Shadow DOM ile oluşturulan bileşenler, uygulamanın diğer bölümlerinde veya başka web sitelerinde kolayca kullanılabilir.

Shadow DOM Oluşumu:

// Shadow DOM'u eklemek istediğiniz öğeyi alın
const hostElement = document.getElementById('my-component');

// Shadow Root oluşturun
// 'open' Shadow DOM'un dışarıdan hostElement.shadowRoot aracılığıyla erişilebilir olmasını sağlar
// 'closed' Shadow DOM'u gizler
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM içine öğeler ekleyin
shadowRoot.innerHTML = `
  <style>
    /* Bu bileşene özgü stiller */
    h2 {
      color: blue;
    }
  </style>
  <h2>Bileşen içindeki başlık</h2>
  <p>Bileşen içindeki paragraf.</p>
`;

Özellikler:

• Slotlar: Shadow DOM içindeki belirli yerlere dış içerik yerleştirmeye izin verir.
• Shadow Parts: Shadow DOM içindeki belirli öğeleri dışarıdan stilize etmeye olanak tanır.

Shadow DOM, yeniden kullanılabilir ve kendi kendine yeten UI öğeleri oluşturmak için gereken güçlü kapsülleme sağlayan Web Bileşenleri (Web Components) oluşturmak için anahtar bir bileşendir.