basic-shadow-2.html (735B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 function tweak() { 6 var shadowDiv = document.createElement("div"); 7 shadowDiv.style.border = "10px solid green"; 8 9 var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); 10 shadowRoot.appendChild(shadowDiv); 11 12 var orangeDiv = document.createElement("div"); 13 orangeDiv.style.border = "10px solid orange"; 14 15 var purpleDiv = document.createElement("div"); 16 purpleDiv.style.border = "10px solid purple"; 17 18 shadowDiv.appendChild(purpleDiv); 19 shadowDiv.insertBefore(orangeDiv, purpleDiv); 20 } 21 </script> 22 </head> 23 <body onload="tweak()"> 24 <div id="outer"> 25 <div style="background-color:red;"></div> 26 </div> 27 </body> 28 </html>