<!DOCTYPE HTML> <html> <head> <script> function tweak() { // div with style "border: 10px solid green" var outerShadow = document.createElement("div"); outerShadow.style.border = "10px solid green"; var outerInsertionPoint = document.createElement("content"); outerShadow.appendChild(outerInsertionPoint); // div with style "border: 10px solid orange" var innerShadow = document.createElement("div"); innerShadow.style.border = "10px solid orange"; var innerInsertionPoint = document.createElement("content"); innerShadow.appendChild(innerInsertionPoint); outerShadow.createShadowRoot().appendChild(innerShadow); var shadowRoot = document.getElementById('outer').createShadowRoot(); shadowRoot.appendChild(outerShadow); } </script> </head> <body onload="tweak()"> <div id="outer">Hello</div> </body> </html>