名前は似てるけど中身は全然違うんじゃ〜
Virtual DOM (仮想DOM)
VueやReactなどのJavaScriptのライブラリ/フレームワークにおけるViewの設計図。VueやReactは、画面上の文字列などが変更された直後に、内部的に仮想DOMを設計図として作り、新旧の設計図を見比べて内容が変更されている箇所だけ実DOM(実際にHTMLで描画されるDOM)を書き換える(=差分更新)。大体の場面において仮想DOMは実DOMよりも速いとされる。
Qiitaでは「なぜ仮想DOMという概念が俺達の魂を震えさせるのか」が有名ですね。
Shadow DOM
Web Componentsにおける技術のひとつで、カプセル化されたDOMまたはそれを実装するための技術のこと。Shadow DOMはメインのドキュメントツリーには存在せず、独自のサブドキュメントツリーを形成し、それを元に画面に描画される。例えば、Chromeの<video>
タグは内部的にShadow DOMで実装されており、videoタグを使うと再生ボタンや時間表示・音量ゲージなどが表示されるが、devtoolsのHTML文書構造からはこれらのDOMは確認できないようになっています。
WebComponentsについては拙作「【コードなしで理解する】 WebComponents超入門」をご覧ください。