OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <script src="resources/polyfill.js"></script> | |
4 | 3 |
5 <div id="host1"><div>Host Child</div></div> | 4 <div id="host1"><div>Host Child</div></div> |
6 | 5 |
7 <script> | 6 <script> |
8 var shadowRoot1 = host1.webkitCreateShadowRoot(); | 7 var shadowRoot1 = host1.webkitCreateShadowRoot(); |
9 shadowRoot1.innerHTML = '<div id="host2">Oldest ShadowRoot Child</div>'; | 8 shadowRoot1.innerHTML = '<div id="host2">Oldest ShadowRoot Child</div>'; |
10 | 9 |
11 var shadowRoot2 = host1.webkitCreateShadowRoot(); | 10 var shadowRoot2 = host1.webkitCreateShadowRoot(); |
12 shadowRoot2.innerHTML = '<shadow></shadow><content></content><shadow><div title=
"debugstop">Shadow Fallback Element (1)</div></shadow>'; | 11 shadowRoot2.innerHTML = '<shadow></shadow><content></content><shadow><div title=
"debugstop">Shadow Fallback Element (1)</div></shadow>'; |
13 | 12 |
14 var shadowRoot3 = host1.webkitCreateShadowRoot(); | 13 var shadowRoot3 = host1.webkitCreateShadowRoot(); |
15 shadowRoot3.innerHTML = '<div id="host4"><shadow></shadow><shadow><div>Shadow Fa
llback Element (2)</div></shadow><span>Not rendered (1)</span><shadow><span>Not
rendered (2)</span></shadow></div>'; | 14 shadowRoot3.innerHTML = '<div id="host4"><shadow></shadow><shadow><div>Shadow Fa
llback Element (2)</div></shadow><span>Not rendered (1)</span><shadow><span>Not
rendered (2)</span></shadow></div>'; |
16 | 15 |
17 var host4 = shadowRoot3.getElementById('host4'); | 16 var host4 = shadowRoot3.getElementById('host4'); |
18 var shadowRoot4 = host4.webkitCreateShadowRoot(); | 17 var shadowRoot4 = host4.webkitCreateShadowRoot(); |
19 | 18 |
20 shadowRoot4.innerHTML = '<content select="div"></content>'; | 19 shadowRoot4.innerHTML = '<content select="div"></content>'; |
21 </script> | 20 </script> |
22 | 21 |
23 </html> | 22 </html> |
OLD | NEW |