| OLD | NEW |
|---|
| (Empty) | |
| 1 SKY MODULE - exports some basic HTML-like elements |
| 2 <import src="element.sky"/> |
| 3 |
| 4 <!-- note: accessibility handling is not implemented yet, because the |
| 5 mojo ax service isn't yet ready --> |
| 6 |
| 7 <element name=html> |
| 8 <!-- implement a scrollable viewport --> |
| 9 </element> |
| 10 |
| 11 <element name=head /> |
| 12 <element name=body /> |
| 13 <element name=p /> |
| 14 |
| 15 <element name=h1> |
| 16 <style> |
| 17 :host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-wei
ght: bold; } |
| 18 </style> |
| 19 </element> |
| 20 |
| 21 <element name=h2> |
| 22 <style> |
| 23 :host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-wei
ght: bold; } |
| 24 </style> |
| 25 </element> |
| 26 |
| 27 <element name=h3> |
| 28 <style> |
| 29 :host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-wei
ght: bold; } |
| 30 </style> |
| 31 </element> |
| 32 |
| 33 <element name=h4> |
| 34 <style> |
| 35 :host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-wei
ght: bold; } |
| 36 </style> |
| 37 </element> |
| 38 |
| 39 <element name=h5> |
| 40 <style> |
| 41 :host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-wei
ght: bold; } |
| 42 </style> |
| 43 </element> |
| 44 |
| 45 <element name=h6> |
| 46 <style> |
| 47 :host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-wei
ght: bold; } |
| 48 </style> |
| 49 </element> |
| 50 |
| 51 <element name=b> |
| 52 <style> |
| 53 :host { font-weight: bold; } |
| 54 </style> |
| 55 </element> |
| 56 |
| 57 <element name=data> |
| 58 <script> |
| 59 module.currentScript.parentNode.setPrototype({ |
| 60 get value () { |
| 61 return this.getAttribute('value'); |
| 62 }, |
| 63 set value (newValue) { |
| 64 this.setAttribute('value', newValue); |
| 65 }, |
| 66 }); |
| 67 </script> |
| 68 </element> |
| 69 |
| 70 <element name=progress> |
| 71 <template> |
| 72 <div> ... </div> |
| 73 </template> |
| 74 <script> |
| 75 module.currentScript.parentNode.setPrototype({ |
| 76 ... |
| 77 }); |
| 78 </script> |
| 79 </element> |
| 80 |
| 81 <element name=details> |
| 82 <style> |
| 83 :host { display: block; } |
| 84 .outer { border: solid; } |
| 85 .header { display: inline; } |
| 86 .summary { display: inline; } |
| 87 </style> |
| 88 <template> |
| 89 <div class="outer"> |
| 90 <div class="header"> |
| 91 <div class="button">OPEN</div> |
| 92 <div class="summary"><content select="summary"/></div> |
| 93 </div> |
| 94 <div class="contents"> |
| 95 <content/> |
| 96 </div> |
| 97 </div> |
| 98 </template> |
| 99 <script> |
| 100 module.currentScript.parentNode.setPrototype({ |
| 101 init: function () { |
| 102 |
| 103 }, |
| 104 open() { |
| 105 |
| 106 } |
| 107 }); |
| 108 </script> |
| 109 </element> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 698293003:
Docs: add an example that uses the current APIs to define an <element> (Closed)
Base URL: https://github.com/domokit/mojo.git@master