OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 This example is from | 3 This example is from |
4 https://github.com/dglazkov/Web-Components-Polyfill/blob/master/samples/news | 4 https://github.com/dglazkov/Web-Components-Polyfill/blob/master/samples/news |
5 --> | 5 --> |
6 <html> | 6 <html> |
7 <head> | 7 <head> |
8 <title>News Component</title> | 8 <title>News Component</title> |
9 </head> | 9 </head> |
10 <body> | 10 <body> |
11 <element name="x-news" extends="ul"> | 11 <polymer-element name="x-news" extends="ul"> |
12 <template> | 12 <template> |
13 <style scoped> | 13 <style scoped> |
14 div.breaking { | 14 div.breaking { |
15 color: Red; | 15 color: Red; |
16 font-size: 20px; | 16 font-size: 20px; |
17 border: 1px dashed Purple; | 17 border: 1px dashed Purple; |
18 } | 18 } |
19 div.other { | 19 div.other { |
20 padding: 2px 0 0 0; | 20 padding: 2px 0 0 0; |
21 border: 1px solid Cyan; | 21 border: 1px solid Cyan; |
22 } | 22 } |
23 </style> | 23 </style> |
24 <div class="breaking"> | 24 <div class="breaking"> |
25 <h2>Breaking Stories</h2> | 25 <h2>Breaking Stories</h2> |
26 <ul> | 26 <ul> |
27 <content select=".breaking"></content> | 27 <content select=".breaking"></content> |
28 </ul> | 28 </ul> |
29 </div> | 29 </div> |
30 <div class="other"> | 30 <div class="other"> |
31 <h2>Other News</h2> | 31 <h2>Other News</h2> |
32 <ul> | 32 <ul> |
33 <content></content> | 33 <content></content> |
34 </ul> | 34 </ul> |
35 </div> | 35 </div> |
36 </template> | 36 </template> |
37 </element> | 37 </polymer-element> |
38 </body> | 38 </body> |
39 </html> | 39 </html> |
OLD | NEW |