Shadow DOM nedir?

Shadow DOM, HTML, CSS ve JavaScript'i ana belgeden izole edilmiş ve ayrı bloklar halinde kapsüllemeye olanak tanıyan bir web standartıdır.

Ana kavramlar:

• Shadow Host: Shadow DOM'un eklendiği DOM elementi.
• Shadow Tree: İzole edilmiş DOM ağacı.
• Shadow Boundary: Shadow DOM ile ana belge arasındaki sınır.
• Shadow Root: Shadow Tree'nin kök düğümü. element.attachShadow({ mode: 'open' | 'closed' }) ile oluşturulur:
  • open: Shadow Root, element.shadowRoot aracılığıyla dışarıdan erişilebilir.
  • closed: Shadow Root dışarıdan erişilemez.

Avantajlar:

• Stil kapsülleme: Shadow DOM'da tanımlanan stiller dışarı sızmaz ve ana belgeyi etkilemez. Varsayılan olarak, ana belgedeki stiller Shadow DOM'u etkilemez, ancak bu kontrol edilebilir.
• DOM kapsülleme: Shadow DOM içindeki öğeler, ana DOM ağacında görünmez, bu da kazara seçicilerin ve manipülasyonların çakışmasını önler.
• Davranış kapsülleme: Mantık ve olay işleyicileri Shadow DOM'da izole edilebilir.

Shadow DOM oluşturma örneği:

// Yeni bir DIV elementi oluşturuyoruz
const hostElement = document.createElement('div');
// Shadow DOM'u elemente ekliyoruz
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Shadow DOM'a içerik ekliyoruz
shadowRoot.innerHTML = `
  <style>
    /* Sadece bu Shadow DOM içinde geçerli stil */
    p {
      color: blue;
    }
  </style>
  <p>Bu, Shadow DOM içindeki bir metindir</p>
`;

// Ana belgeye host elementi ekliyoruz
document.body.appendChild(hostElement);

Uygulamalar:

• Yeniden kullanılabilir web bileşenleri oluşturma.
• Dış kütüphanelerin stillerini izole etme.
• Bileşenin iç detaylarını dış müdahalelerden koruma.

Stillerle çalışma özellikleri:

• Dış stiller varsayılan olarak Shadow DOM'u etkilemez.
• :host pseudo-sınıfı, Shadow DOM içinden Shadow Host'u stilize etmek için kullanılabilir.
• :host-context() kullanılarak Shadow Host'un bağlamına göre stil verilebilir.
• <slot> içine yerleştirilen öğeleri stilize etmek için ::slotted() pseudo-element kullanılabilir.

<my-component>
  <!-- Bu öğe, Shadow DOM içindeki slota "gönderilecek" -->
  <span>Slot içeriği</span>
</my-component>

// my-component bileşeninin Shadow DOM'u içinde
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* "my-slot" adlı slota yerleştirilen öğe için stil */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Bileşenin ana içeriği</div>
  <slot></slot> <!-- Burada slot içeriği gösterilecek -->
`;

Shadow DOM, Web Bileşenleri spesifikasyonunun bir parçasıdır.