Yan yana

Shadow DOMvsSanal DOM

Shadow DOM ile sanal DOM (virtual DOM) arasındaki fark nedir?

Güncellendi 6 Ekim 20262 dk okuma7 fark

Kısaca

İkisi farklı sorunları çözer: shadow DOM bir bileşenin işaretleme ve stillerini yalıtır; sanal DOM ise kütüphanelerin sayfayı verimli güncellemesini sağlar.

Web Geliştirmes. 51

Shadow DOM

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 sayfasını oku

Web Geliştirmes. 47

Sanal DOM

Sanal DOM, sayfanın öğe ağacının JavaScript belleğinde tutulan hafif bir kopyasıdır; arayüz kütüphaneleri onu karşılaştırarak gerçek DOM'u verimli günceller.

Sanal DOM sayfasını oku

Shadow DOM ve Sanal DOM karşılaştırması

Özellik	Shadow DOM	Sanal DOM
Çözdüğü sorun	Kapsülleme: bir bileşenin işaretlemesini ve stillerini yalıtılmış tutar	Verimli yeniden render: gereken en az DOM değişikliğini hesaplar
Nedir	Bir tarayıcı standardı, gerçek DOM'un bir parçası	Kütüphanelerin kullandığı, JavaScript belleğinde tutulan bir teknik
Ekranda çizilir mi	Evet; shadow ağacı sayfanın geri kalanı gibi render edilir	Hayır; yalnızca ürettiği gerçek DOM değişiklikleri çizilir
Sağlayan	Tarayıcı; `attachShadow()` ya da bildirimsel (declarative) HTML ile	React, Preact ya da Vue gibi bir kütüphane
CSS'e etkisi	Sayfa stilleri dışarıda, bileşen stilleri içeride kalır	Yok; stiller ortaya çıkan gerçek DOM'a her zamanki gibi uygulanır
Güncelleme hızına etkisi	Yok; güncellemelerle değil, işaretleme ve stillerin kapsamıyla ilgilenir	Kod bildirimsel kalırken güncellemeleri makul ölçüde hızlı tutar
Tipik kullananlar	Web Components, Lit, `<video>` gibi tarayıcı kontrolleri	React, Preact ve Vue uygulamaları

Fark, açıklamalı

Adları benzese de ikisi farklı sorunları çözer. Shadow DOM, kapsülleme için bir tarayıcı standardıdır: attachShadow() bir öğeye kendi gizli DOM ağacını verir; bu ağacın stilleri dışarı sızmaz, sayfanın stilleri de içeri sızmaz. Sanal DOM ise verimli yeniden render için bir tekniktir: React ve Vue gibi kütüphaneler arayüzün bir kopyasını düz JavaScript nesneleri olarak tutar, yeni kopyayı eskisiyle karşılaştırır ve gerçek DOM'a yalnızca farkları uygular.

Yaşadıkları yer de farklıdır. Shadow ağacı, tarayıcının çizdiği gerçek DOM'un bir parçasıdır; bir bileşenin iç yapısını gizli tutar ve custom element'ler ile <template> öğesiyle birlikte Web Components'in arkasındaki standartlardan biridir. Sanal DOM ise yalnızca bir kütüphanenin belleğinde var olur ve kendisi hiç çizilmez; geliştiricilerin belirli bir durum için arayüzün nasıl görünmesi gerektiğini tarif edip DOM işlemlerini kütüphaneye bırakmasını sağlar.

Farklı sorulara yanıt verdikleri için birlikte çalışabilirler. Bir React ya da Vue bileşeni, stil yalıtımı kazanmak için bir shadow root'un içine render edebilir; Vue'nun defineCustomElement fonksiyonu da bir bileşeni shadow DOM kullanan bir custom element'e dönüştürür. Her biri diğeri olmadan da karşımıza çıkar: popüler bir Web Components kütüphanesi olan Lit shadow DOM kullanır ama sanal DOM kullanmaz; Svelte ve Solid ise sanal DOM'u tamamen atlar.

Sık yapılan bir yanlış, shadow DOM'un sanal DOM'un daha hızlı ve tarayıcıya yerleşik bir sürümü olduğu düşüncesidir. Shadow DOM güncellemeleri hızlandırmak için hiçbir şey yapmaz, sanal DOM da stilleri yalıtmak için hiçbir şey yapmaz. Bir başkası, kapalı bir shadow root'un bir güvenlik sınırı olduğu düşüncesidir; o yalnızca ağacı dışarıdaki script'lerden gizler, bu da koruma değil kapsüllemedir.

Hangisini kullanmalısınız?

Shadow DOM şu durumlarda doğru seçim:

Bir widget, sayfanın CSS'i ne olursa olsun her sayfada aynı görünmeli.
Framework'ler arasında ya da düz HTML sayfalarında paylaşılacak Web Components geliştiriyorsunuz.
Sayfa stilleri ve script'leri bir bileşenin içine yanlışlıkla uzanmamalı.

Sanal DOM şu durumlarda doğru seçim:

Arayüzü bildirimsel olarak tarif etmek ve DOM'u React ya da Vue gibi bir kütüphanenin güncellemesine bırakmak istiyorsunuz.
Arayüz; listeler, formlar ve filtreler gibi, duruma bağlı olarak sık sık değişiyor.
Stil yalıtımına değil, büyük ve dinamik bir ağacın verimli güncellenmesine ihtiyacınız var.

İki yolla bir fiyat etiketi: yalıtılmış stiller ya da farkı hesaplanmış bir güncelleme

Shadow DOMjsx

// Shadow DOM: the browser isolates this element's markup and styles
class PriceTag extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML =
      "<style>span { color: green; }</style><span><slot></slot></span>";
  }
}
customElements.define("price-tag", PriceTag);

// <price-tag>$12</price-tag>: page CSS can't restyle the span inside,
// and the span rule styles nothing outside it

Sanal DOMjsx

// Virtual DOM: React compares the new tree with the old one
function PriceTag({ amount }) {
  return <span className="price">{amount}</span>;
}

// When amount changes from "$12" to "$15", React builds a new virtual tree,
// diffs it and updates only the text node; styles are still global CSS
root.render(<PriceTag amount="$15" />);

Sık sorulan sorular

Shadow DOM, sanal DOM'un tarayıcıdaki sürümü müdür?

Hayır. Shadow DOM, kapsülleme için gerçek DOM'un bir bölümünü yalıtır ve güncellemeleri hızlandırmak için hiçbir şey yapmaz. Sanal DOM ise hangi DOM değişikliklerinin yapılacağını hesaplamaya yarayan bir kütüphane tekniğidir.

React shadow DOM kullanır mı?

Varsayılan olarak hayır. React sanal DOM kullanarak normal DOM'a render eder; ama sizin oluşturduğunuz bir shadow root'un içine de render edebilir ve React 19'dan beri shadow DOM kullananlar dahil custom element'leri tam olarak destekler.

Önce hangisini öğrenmeliyim?

İşinizin kullandığını. React ya da Vue kullanan uygulama geliştiricileri sanal DOM ile her gün karşılaşır; tasarım sistemleri ya da sayfalara gömülen widget'lar geliştirenler ise shadow DOM ile karşılaşır. Gerçek DOM'u iyi bildiğinizde ikisi de daha anlaşılır olur.