nested-insertion-point-1.html (895B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 function tweak() { 6 // div with style "border: 10px solid green" 7 var outerShadow = document.createElement("div"); 8 outerShadow.style.border = "10px solid green"; 9 10 var outerInsertionPoint = document.createElement("slot"); 11 outerShadow.appendChild(outerInsertionPoint); 12 13 // div with style "border: 10px solid orange" 14 var innerShadow = document.createElement("div"); 15 innerShadow.style.border = "10px solid orange"; 16 17 var slot = document.createElement("slot"); 18 innerShadow.appendChild(slot); 19 20 outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow); 21 22 var shadowRoot = 23 document.getElementById('outer').attachShadow({mode: 'open'}); 24 shadowRoot.appendChild(outerShadow); 25 } 26 </script> 27 </head> 28 <body onload="tweak()"> 29 <div id="outer">Hello</div> 30 </body> 31 </html>