OLD | NEW |
1 Content-Type: text/plain | 1 Content-Type: text/plain |
2 <html><head><style>template { display: none; }</style> | 2 <html><head><style>template { display: none; }</style> |
3 <title>Simple Web Components Example</title> | 3 <title>Simple Web Components Example</title> |
4 | 4 |
5 <script src="../../packages/polymer/testing/testing.js"></script> | 5 <script src="../../packages/polymer/testing/testing.js"></script> |
6 </head> | 6 <style>template, |
| 7 thead[template], |
| 8 tbody[template], |
| 9 tfoot[template], |
| 10 th[template], |
| 11 tr[template], |
| 12 td[template], |
| 13 caption[template], |
| 14 colgroup[template], |
| 15 col[template], |
| 16 option[template] { |
| 17 display: none; |
| 18 }</style></head> |
7 <body><polymer-element name="x-news" extends="ul"> | 19 <body><polymer-element name="x-news" extends="ul"> |
8 <template> | 20 <template> |
9 | 21 <style scoped=""> |
10 <style> | 22 div.breaking { |
11 div.breaking { | 23 color: Red; |
12 color: #f00; | 24 font-size: 20px; |
13 font-size: 20px; | 25 border: 1px dashed Purple; |
14 border: 1px dashed #800080; | 26 } |
15 } | 27 div.other { |
16 div.other { | 28 padding: 2px 0 0 0; |
17 padding: 2px 0 0 0; | 29 border: 1px solid Cyan; |
18 border: 1px solid #0ff; | 30 } |
19 } | 31 </style> |
20 </style><div class="breaking"> | 32 <div class="breaking"> |
21 <h2>Breaking Stories</h2> | 33 <h2>Breaking Stories</h2> |
22 <ul> | 34 <ul> |
23 <content select=".breaking"></content> | 35 <content select=".breaking"></content> |
24 </ul> | 36 </ul> |
25 </div> | 37 </div> |
26 <div class="other"> | 38 <div class="other"> |
27 <h2>Other News</h2> | 39 <h2>Other News</h2> |
28 <ul> | 40 <ul> |
29 <content></content> | 41 <content></content> |
30 </ul> | 42 </ul> |
31 </div> | 43 </div> |
32 </template> | 44 </template> |
33 | 45 |
34 </polymer-element> | 46 </polymer-element> |
35 | 47 |
36 <h1>Simple Web Components Example</h1> | 48 <h1>Simple Web Components Example</h1> |
37 <ul is="x-news"><shadow-root> | 49 <ul is="x-news"><shadow-root> |
38 | 50 <style scoped=""> |
39 <style> | 51 div.breaking { |
40 div.breaking { | 52 color: Red; |
41 color: #f00; | 53 font-size: 20px; |
42 font-size: 20px; | 54 border: 1px dashed Purple; |
43 border: 1px dashed #800080; | 55 } |
44 } | 56 div.other { |
45 div.other { | 57 padding: 2px 0 0 0; |
46 padding: 2px 0 0 0; | 58 border: 1px solid Cyan; |
47 border: 1px solid #0ff; | 59 } |
48 } | 60 </style> |
49 </style><div class="breaking"> | 61 <div class="breaking"> |
50 <h2>Breaking Stories</h2> | 62 <h2>Breaking Stories</h2> |
51 <ul> | 63 <ul> |
52 <content select=".breaking"></content> | 64 <content select=".breaking"></content> |
53 </ul> | 65 </ul> |
54 </div> | 66 </div> |
55 <div class="other"> | 67 <div class="other"> |
56 <h2>Other News</h2> | 68 <h2>Other News</h2> |
57 <ul> | 69 <ul> |
58 <content></content> | 70 <content></content> |
59 </ul> | 71 </ul> |
60 </div> | 72 </div> |
61 </shadow-root> | 73 </shadow-root> |
62 <li><a href="//example.com/stories/1">A story</a></li> | 74 <li><a href="//example.com/stories/1">A story</a></li> |
63 <li><a href="//example.com/stories/2">Another story</a></li> | 75 <li><a href="//example.com/stories/2">Another story</a></li> |
64 <li class="breaking"><a href="//example.com/stories/3">Also a story</a></li> | 76 <li class="breaking"><a href="//example.com/stories/3">Also a story</a></li> |
65 <li><a href="//example.com/stories/4">Yet another story</a></li> | 77 <li><a href="//example.com/stories/4">Yet another story</a></li> |
66 <li><a href="//example.com/stories/4">Awesome story</a></li> | 78 <li><a href="//example.com/stories/4">Awesome story</a></li> |
67 <li class="breaking"><a href="//example.com/stories/5">Horrible story</a></l
i> | 79 <li class="breaking"><a href="//example.com/stories/5">Horrible story</a></l
i> |
68 </ul> | 80 </ul> |
69 | 81 |
70 | 82 |
71 | 83 |
72 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 84 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
73 <script type="application/dart" src="news_index_test.html_bootstrap.dart"></scri
pt></body></html> | 85 <script type="application/dart" src="news_index_test.html_bootstrap.dart"></scri
pt></body></html> |
OLD | NEW |