| OLD | NEW |
| (Empty) | |
| 1 SkyElement |
| 2 === |
| 3 |
| 4 SkyElement is the framework for creating...yup...Sky Elements. It take heavy |
| 5 inspriation from [Polymer](www.polymer-project.org) and isn't very fully |
| 6 featured...yet |
| 7 |
| 8 Declaring an element |
| 9 -------- |
| 10 ```HTML |
| 11 <link rel="import" href="../path/to/sky-element.sky" as="SkyElement" /> |
| 12 <template> |
| 13 <my-other-element>Hello, {{ place }}</my-other-element> |
| 14 </template> |
| 15 <script> |
| 16 // SkyElement takes a single object as it's only parameter |
| 17 SkyElement({ |
| 18 name: 'my-element', // required. The element's tag-name |
| 19 attached: function() { |
| 20 this.place = 'World'; |
| 21 }, // optional |
| 22 detached: function() {}, // optional |
| 23 attributeChanged: function(attrName, newValue, oldValue) {} // optional |
| 24 }); |
| 25 </script> |
| 26 ``` |
| 27 |
| 28 Note that an element's declared ShadowDOM is the previous <template> |
| 29 element to the <script> element which defines the element. |
| 30 |
| 31 Databinding |
| 32 -------- |
| 33 SkyElement's databinding support is derived from Polymer's. At the moment, |
| 34 there are some key differences: |
| 35 |
| 36 There is not yet support for |
| 37 * Declarative event handlers |
| 38 * Inline expressions |
| 39 * Self-observation (e.g. fooChanged() gets invoked when this.foo is changed) |
| 40 * Computed properties (e.g. the computed block) |
| 41 * Conditional attributes (e.g. `<my-foo checked?="{{ val }}" `) |
| 42 |
| 43 Also, because there are so few built-in elements in Sky, the default behavior |
| 44 of HTMLElement with bindings is to assign to the property. e.g. |
| 45 |
| 46 ```HTML |
| 47 <my-foo bar="{{ bas }}"> |
| 48 ``` |
| 49 |
| 50 Will not setAttribute on the my-foo, instead it will assign to the `bar` |
| 51 property of `my-foo`. There are two exceptions to this: `class` & `style` -- |
| 52 those still`setAttribute`. |
| OLD | NEW |