OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src='resources/shadow-dom.js'></script> | 2 <script src='resources/shadow-dom.js'></script> |
3 <div id='d1'> | 3 <div id='d1'> |
4 <template data-mode='open'> | 4 <template data-mode='open'> |
5 <div id='d1-1'> | 5 <div id='d1-1'> |
6 <template data-mode='open'> | 6 <template data-mode='open'> |
7 <div id='d1-1-1'>d1-1-1</div> | 7 <div id='d1-1-1'>d1-1-1</div> |
8 <slot name='d1-1-s1'></slot> | 8 <slot name='d1-1-s1'></slot> |
9 <slot name='d1-1-s2'></slot> | 9 <slot name='d1-1-s2'></slot> |
10 <div id='d1-1-2'>d1-1-2</div> | 10 <div id='d1-1-2'>d1-1-2</div> |
11 </template> | 11 </template> |
12 <div id='d1-2'>d1-2</div> | 12 <div id='d1-2'>d1-2</div> |
13 <slot id='d1-s0'></slot> | 13 <slot id='d1-s0'></slot> |
14 <slot name='d1-s1' slot='d1-1-s1'></slot> | 14 <slot name='d1-s1' slot='d1-1-s1'></slot> |
15 <slot name='d1-s2'></slot> | 15 <slot name='d1-s2'></slot> |
16 <div id='d1-3'>d1-3</div> | 16 <div id='d1-3'>d1-3</div> |
17 <div id='d1-4' slot='d1-1-s1'>d1-4</div> | 17 <div id='d1-4' slot='d1-1-s1'>d1-4</div> |
18 </div> | 18 </div> |
19 </template> | 19 </template> |
20 <div id='d2' slot='d1-s1'>d2</div> | 20 <div id='d2' slot='d1-s1'>d2</div> |
21 <div id='d3' slot='d1-s2'>d3</div> | 21 <div id='d3' slot='d1-s2'>d3</div> |
22 <div id='d4' slot='non-existent'>d4</div> | 22 <div id='d4' slot='non-existent'>d4</div> |
23 <div id='d5'>d5</div> | 23 <div id='d5'>d5</div> |
24 </div> | 24 </div> |
25 <script> | 25 <script> |
26 convertTemplatesToShadowRootsWithin(d1); | 26 convertTemplatesToShadowRootsWithin(d1); |
27 </script> | 27 </script> |
OLD | NEW |