Shadow DOM

Okunuşu: şedou dom

Güncellendi 6 Ekim 20262 dk okuma

Kısaca

Shadow DOM, bir öğeye gizli ve ayrı bir DOM ağacı ekleyen tarayıcı özelliğidir; böylece o öğenin işaretlemesi ve stilleri sayfanın geri kalanından yalıtılır.

Shadow DOM nedir?

Normalde bir sayfadaki her öğe ve stil kuralı ortak tek bir DOM ağacında yaşar; bu yüzden sayfanın bir bölümü için yazılmış bir CSS kuralı yanlışlıkla başka bir bölümü değiştirebilir. Shadow DOM bu sorunu bileşenler için çözer. Shadow host denen bir öğede attachShadow() çağırmak ona bir shadow root verir: sayfanın normal querySelector çağrılarının ulaşamadığı, stilleri dışarı sızmayan ve sayfanın stillerinin de içeri sızmadığı ayrı bir ağacın kökü.

Shadow DOM; custom element'ler ve <template> öğesiyle birlikte Web Components'in arkasındaki standartlardan biridir. Bir bileşenin etiketleri arasına yazılan içerik, yani light DOM, shadow ağacında bir <slot> nerede duruyorsa orada görünür. Bazı şeyler sınırı bilerek geçer: color ve font-family gibi kalıtılan özellikler, tema için CSS custom property'leri ve bileşenin ::part() için dışarı açtığı parçalar. Tarayıcılar aynı mekanizmayı <video> düğmeleri ve <input type="range"> kaydırıcısı gibi kendi kontrolleri için de kullanır.

Shadow root, ortak bir evin içinde kendi dekorasyon kuralları olan bir odaya benzer: içeride boyanan içeride kalır, evin duvar kâğıdı da onun duvarlarını kaplamaz. Declarative shadow DOM ile HTML'deki bir <template shadowrootmode="open"> öğesi shadow root'u JavaScript olmadan oluşturur; böylece sunucuda render edilen bileşenler daha hiçbir script yüklenmeden doğru görünür. Bütün büyük tarayıcılar bunu 2024'ten beri destekliyor.

Shadow DOM sık sık sanal DOM (virtual DOM) ile karıştırılır, ama ikisi birbiriyle ilgisizdir. Sanal DOM, React gibi kütüphanelerin gerçek DOM'da hangi değişiklikleri yapacağını bulmak için karşılaştırdığı, arayüzün JavaScript'teki bir kopyasıdır; shadow DOM ise tarayıcının gerçek DOM'unun bir parçasıdır ve kapsüllenmiş bir alt ağaç oluşturur. mode: "closed" ile oluşturulan kapalı bir shadow root, ağacını dışarıdaki script'lerden gizler; ama bu bir güvenlik sınırı değil, kapsüllemedir.

Önemli noktalar

Shadow DOM, bir öğeye ayrı ve kapsüllenmiş bir DOM ağacı ekler.
İçerideki stiller dışarı sızmaz, sayfanın stilleri de içeri sızmaz.
Web Components'in temel parçasıdır; <slot> öğenin kendi içeriğini gösterir.
Declarative shadow DOM, HTML'in shadow root'ları JavaScript olmadan oluşturmasını sağlar.
Arayüz kütüphanelerinin bellekte tuttuğu kopya olan sanal DOM ile ilgisi yoktur.

Örnek

Kendi shadow DOM'u olan bir custom elementjavascript

class UserCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>p { color: royalblue; font-weight: bold; }</style>
      <p><slot></slot></p>
    `;
  }
}
customElements.define("user-card", UserCard);

// <user-card>Ada Lovelace</user-card>
// The p rule styles only this card; other <p> elements on the page are untouched.

Sık sorulan sorular

Shadow DOM ile sanal DOM arasındaki fark nedir?

Shadow DOM, bir öğeye kendi yalıtılmış öğe ve stil ağacını veren bir tarayıcı özelliğidir. Sanal DOM ise React gibi kütüphanelerin gerçek DOM'u güncellemek için karşılaştırdığı, arayüzün JavaScript'teki bir kopyasıdır. İkisi farklı sorunları çözer.

Shadow DOM içindeki öğeleri dışarıdan biçimlendirebilir miyim?

Normal seçicilerle biçimlendiremezsiniz. Bunun yerine bileşen bazı kancalar sunabilir: sınırı geçebilen CSS custom property'leri ve dışarıdaki CSS'in ::part() ile hedeflediği adlandırılmış parçalar. color ve font-family gibi kalıtılan özellikler de içeri akar.

Bir web component yapmak için shadow DOM gerekir mi?

Hayır. Bir custom element onsuz da çalışır. Shadow DOM işaretlemenin ve stillerin yalıtılmasını ekler; bu da her sayfada aynı görünmesi gereken bileşenler için işe yarar.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin