JSFiddle - React, Tailwind, and code Playground

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"></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 host = document.getElementById('shadow-host');
  
  // Create a shadow DOM, attached to the shadow-host element.
  // shadowRoot is the root node of the shadow DOM.
	const shadowRoot = host.attachShadow({mode: 'open'});
  
  // Insert some content into the shadow DOM.  These <style>s won't affect
  // content outside of the shadow.
	shadowRoot.innerHTML = `
  	<style>
    	div {
      	background-color: green;
      }
  	</style>
    <div>Content inside Shadow DOM</div>`;
    
    const innerHTMLShower = document.getElementById("innerhtml-shower");
    const container = document.getElementById("container");
    innerHTMLShower.innerHTML = container.outerHTML;
</script>
</body>