# Shadow DOM vs Virtual DOM

Adres: https://softwaredictionary.org/tr/karsilastirma/shadow-dom-vs-virtual-dom
Son güncelleme: 2026-10-06

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.

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

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.

| Ö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ı |

## 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.

## 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.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt