Declarative shadow DOM demo

by dandclark_msft

HTML

<title>Shadow DOM demos</title>
<body>
  <style>
    div {
      color: blue;
    }
  </style>
  <div id="container">
    <div>Content outside shadow DOM</div>
    <div id="shadow-host">
      <template shadowroot="open">
        <style>
    	    div {
      	    background-color: green;
          }
  	    </style>
        <div>Content inside Shadow DOM</div>
      </template>
    </div>
    <div>Content outside shadow DOM</div>
  </div>

  <br>
  <h3>
   HTML content of container element (note, shadow DOM contents aren't there):  
  </h3>
  <textarea id="innerhtml-shower" style="height:200px;width:400px;"></textarea>
<script>
    const innerHTMLShower = document.getElementById("innerhtml-shower");
    const container = document.getElementById("container");
    innerHTMLShower.innerHTML = container.outerHTML;
</script>
</body>