Shadow DOMとVirtual DOM - Fuzoku実践入門ブログ

Shadow DOMとVirtual DOM、影と仮想、何となくニュアンスが似ているため分かりにくい、そういう声を聞きました。

そこで、一介の風俗解説本の著者が分かりやすく両者を説明する方法を考えてみました。

現実にあるのが影（Shadow）、現実にないのが仮想（Virtual）

色々と自分の中で整理した結果、現実に存在するかしないかで区別すると、理解しやすいと考えました。

要するに、言葉にしてみると次のような考え方です。

影は現実に存在しているので、Shadow DOMも実際のDOMツリーには確かに存在している。
仮想は現実に存在していないため、実際のDOMツリーにも存在しない。

それでは、上記を踏まえた上で、実際の例を見てみましょう。

存在しているけど、触れられないのが影

Shadow DOMの役割は、Shadow DOM 101 - HTML5 Rocksの冒頭にも書かれている通り、DOMツリーのカプセル化です。

<html>
<!-- グローバルなCSS -->
<style>
h1 { color: red;}
</style>

<h1>Outside Shadow DOM</h1>

<template id="shadow">
  <!-- Shadow DOMのみ適用されるCSS -->
  <style>
  h1 { background-color: blue; }
  </style>
  <h1>Inside Shadow DOM</h1>
</template>

<!-- Shadow Hostの要素 -->
<shadow-host></shadow-host>

<script>
var host = document.querySelector('shadow-host');
var root = host.createShadowRoot();
var template = document.querySelector('#shadow');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
</script>
</html>

たとえば、上のようなHTMLをブラウザで表示すると、次のような表示になります。

Shadow DOMのサンプル

インスペクタに#shadow-rootが表示されている通り、Shadow DOMで作られたDOMツリーは確かに存在しているのですが、人は影に触れることができません。

そのため、Shadow DOMの外部で定義されているCSSは、Shadow DOM内部に触れることができないのです。

実際に存在しないのが仮想

次にReactを使ったVirtual DOMを見てみましょう。

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
var VirtualDOM = React.createClass({
  render: function() {
    return (
      <h1>Virtual DOM</h1>
    );
  }
});
React.render(
  <VirtualDOM />,
  document.querySelector('#content')
);
    </script>
  </body>
</html>