Shadow DOM

by stevenkaspar

HTML

<h3>Notice how this won't change color but the bottom one will</h3>
<div id='Existing'>
  I have some content
</div>

CSS

body {
  min-height: 300px;
}

JavaScript

var attach = function(){
  // create a shadow on our existing element
  var shadow = document.querySelector('#Existing').attachShadow({mode: 'open'});
  
   // add content to our shadow
  setTimeout(function(){
    shadow.innerHTML = '<h3>Shadow DOM</h3>'
  }, 1000)
  
   // add css rule that will only effect the shadow 
  setTimeout(function(){
    shadow.innerHTML += '<style>h3{color: red}</style>';
  }, 2000)
  
}

//using timeouts for effect
setTimeout(attach, 1000)