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