basic-shadow-1.html (610B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 function tweak() { 6 // div with style "width:300px; height:100px; background-color:green" 7 var shadowDiv = document.createElement("div"); 8 shadowDiv.style.width = "300px"; 9 shadowDiv.style.height = "100px"; 10 shadowDiv.style.backgroundColor = "green"; 11 12 var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); 13 shadowRoot.appendChild(shadowDiv); 14 } 15 </script> 16 </head> 17 <body onload="tweak()"> 18 <div id="outer"> 19 <div style="width:300px; height:100px; background-color:red;"></div> 20 </div> 21 </body> 22 </html>