Shadow DOM

Shadow DOMの動作サンプルです。Shadow DOMで使われるセレクタは、CSS Scoping Moduleによってサポートされています。

Source


  <style>
  #host {
    padding: 5px;
  }
  ::shadow span {
    text-decoration: underline;
  }
  </style>
  <div id="host">I'm Host</div>

  <!-- template内はShadow Rootに追加されると仮定 -->
  <template id="tmpl">
    <style>
  :host {
    border: 4px dotted black;
  }
  #guest {
    border: 4px double black;
  }
  </style>
  <p id="guest">Hello! <span>Shadow DOM</span></p>
  </template>

  <script>
  var host = document.getElementById('host');
  var tmpl = document.getElementById('tmpl');
  var root = host.createShadowRoot();
  root.appendChild(tmpl.content.cloneNode(true));
  </script>
  

Sample

I'm Host