Shadow DOM, Virtual DOM ve normal DOM arasındaki fark nedir?

DOM (Document Object Model), HTML ve XML belgeleri için bir API'dir. Belgeyi temsil eden bir düğüm ağacı sunar; burada her düğüm, belge öğesi, özniteliği veya metin parçasına karşılık gelir. Web sayfalarının yapısına, stillerine ve içeriğine erişmek ve bunları manipüle etmek için kullanılır. DOM üzerinde doğrudan manipülasyonlar, stil, düzen hesaplaması ve yeniden çizim gerektirdiği için yavaş olabilir.

Virtual DOM, React veya Vue gibi çerçevelerde kullanılan bir kavramdır. Bellekte tutulan DOM ağacının hafif bir temsilidir. Bileşen verileri değiştiğinde, çerçeve yeni bir sanal DOM ağacı oluşturur. Daha sonra, önceki sanal ağaçla karşılaştırır (diffing) ve gerçek DOM'ye uygulanması gereken minimum değişiklikleri belirler. Bu, sayfa güncellemelerini optimize ederek maliyetli işlemleri en aza indirir.

Shadow DOM, bir bileşenin yapısını, stillerini ve davranışını kapsüllemeye olanak tanıyan bir web standardıdır. Gizli "gölge" DOM ağacı oluşturur ve bu, normal DOM'daki (ana öğe) bir öğeye bağlanır. Shadow DOM içeriği, belgenin geri kalanından izole edilmiştir: içindeki stiller dış dünyayı etkilemez ve tersi de geçerlidir. Bu, yeniden kullanılabilir ve izole bileşenler oluşturmak için faydalıdır, örneğin <video> veya <input type="range"> gibi.

Ana farklar:

Özellik	Normal DOM	Virtual DOM	Shadow DOM
Temsil	Gerçek belge ağacı API'si	Bellekte hafif bir DOM temsili	Kapsüllenmiş gölge DOM ağacı
Amaç	Belgeye erişim ve değişiklik API'si	DOM güncellemelerini optimize etme	Bileşenleri kapsülleme
Manipülasyonlar	Doğrudan	Dolaylı (sürüm karşılaştırmasıyla)	Doğrudan, ama sadece "gölge" içinde
Stil izolasyonu	Yok	Yok (CSS-in-JS veya modüller kullanılmadıkça)	Var
Standart	Web platformunun bir parçası	Çerçeve kavramı	Web platformunun bir parçası