|
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').createShadowRoot(); |
|
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 shadowRoot.appendChild(purpleDiv); |
|
19 shadowRoot.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> |