<!DOCTYPE HTML> <html> <head> <script> function tweak() { var olderShadow = document.getElementById('outer').createShadowRoot(); olderShadow.innerHTML = '<div style="width:100px; height:100px; background-color: orange"><content></content></div>'; var youngerShadow = document.getElementById('outer').createShadowRoot(); youngerShadow.innerHTML = '<div style="width:100px; height:100px; background-color: green"></div><shadow>Hello World</shadow>'; } </script> </head> <body onload="tweak()"> <div id="outer"> <div style="width:300px; height:100px; background-color:red;"></div> </div> </body> </html>