| OLD | NEW |
| 1 <!DOCTYPE html> | |
| 2 <!-- | |
| 3 This example is from | |
| 4 https://github.com/dglazkov/Web-Components-Polyfill/blob/master/samples/news | |
| 5 --> | |
| 6 <html> | |
| 7 <head> | |
| 8 <title>News Component</title> | |
| 9 </head> | |
| 10 <body> | |
| 11 <polymer-element name="x-news" extends="ul"> | 1 <polymer-element name="x-news" extends="ul"> |
| 12 <template> | 2 <template> |
| 13 <style scoped> | 3 <style scoped> |
| 14 div.breaking { | 4 div.breaking { |
| 15 color: Red; | 5 color: Red; |
| 16 font-size: 20px; | 6 font-size: 20px; |
| 17 border: 1px dashed Purple; | 7 border: 1px dashed Purple; |
| 18 } | 8 } |
| 19 div.other { | 9 div.other { |
| 20 padding: 2px 0 0 0; | 10 padding: 2px 0 0 0; |
| 21 border: 1px solid Cyan; | 11 border: 1px solid Cyan; |
| 22 } | 12 } |
| 23 </style> | 13 </style> |
| 24 <div class="breaking"> | 14 <div class="breaking"> |
| 25 <h2>Breaking Stories</h2> | 15 <h2>Breaking Stories</h2> |
| 26 <ul> | 16 <ul> |
| 27 <content select=".breaking"></content> | 17 <content select=".breaking"></content> |
| 28 </ul> | 18 </ul> |
| 29 </div> | 19 </div> |
| 30 <div class="other"> | 20 <div class="other"> |
| 31 <h2>Other News</h2> | 21 <h2>Other News</h2> |
| 32 <ul> | 22 <ul> |
| 33 <content></content> | 23 <content></content> |
| 34 </ul> | 24 </ul> |
| 35 </div> | 25 </div> |
| 36 </template> | 26 </template> |
| 37 <script type="application/dart"> | 27 <script type="application/dart"> |
| 38 import 'package:polymer/polymer.dart'; | 28 import 'package:polymer/polymer.dart'; |
| 39 | 29 |
| 40 class XNews extends PolymerElement {} | 30 class XNews extends PolymerElement {} |
| 41 | 31 |
| 42 @initMethod | 32 @initMethod |
| 43 _init() { | 33 _init() { |
| 44 registerPolymerElement('x-news', () => new XNews()); | 34 registerPolymerElement('x-news', () => new XNews()); |
| 45 } | 35 } |
| 46 </script> | 36 </script> |
| 47 </polymer-element> | 37 </polymer-element> |
| 48 </body> | |
| 49 </html> | |
| OLD | NEW |