<!DOCTYPE HTML> <html> <head> <script> function tweak() { // div with style "width:300px; height:100px; background-color:green" var shadowDiv = document.createElement("div"); shadowDiv.style.width = "300px"; shadowDiv.style.height = "100px"; shadowDiv.style.backgroundColor = "green"; var shadowRoot = document.getElementById('outer').createShadowRoot(); shadowRoot.appendChild(shadowDiv); } </script> </head> <body onload="tweak()"> <div id="outer"> <div style="width:300px; height:100px; background-color:red;"></div> </div> </body> </html>