<!DOCTYPE HTML> <html> <head> <script> function tweak() { var olderShadow = document.getElementById('outer').createShadowRoot(); olderShadow.innerHTML = '<content></content><span>World</span>'; var youngerShadow = document.getElementById('outer').createShadowRoot(); youngerShadow.innerHTML = '<div id="shadowparent"><shadow id="youngshadow"><span>Hello</span></shadow></div>'; var shadowParent = youngerShadow.getElementById("shadowparent"); var nestedShadow = shadowParent.createShadowRoot(); nestedShadow.innerHTML = '<div style="background-color: green"><content></content></div>'; // Dynamically append a span to the shadow element in the younger ShadowRoot to make sure // it is projected into the nested shadow. var appendedSpan = document.createElement("span"); appendedSpan.textContent = ' '; youngerShadow.getElementById("youngshadow").appendChild(appendedSpan); } </script> </head> <body onload="tweak()"> <div id="outer"> <div style="width:300px; height:100px; background-color:red;"></div> </div> </body> </html>