OLD | NEW |
1 SKY MODULE - defines an <element> element | 1 SKY MODULE - defines an <element> element |
2 <import src="sky:core" as="sky"/> | 2 <import src="sky:core" as="sky"/> |
3 | 3 |
4 <!-- usage: | 4 <!-- usage: |
5 | 5 |
6 <element name="tagname"> | 6 <element name="tagname"> |
7 <style> style here (optional) </style> | 7 <style> style here (optional) </style> |
8 <template> shadow tree here (optional) </template> | 8 <template> shadow tree here (optional) </template> |
9 <script> // optional | 9 <script> // optional |
10 module.currentScript.parentNode.setPrototype({ | 10 module.currentScript.parentNode.setPrototype({ |
11 init: function () { | 11 init: function () { |
12 // constructor here | 12 // constructor here |
13 }, | 13 }, |
14 // rest of api here | 14 // rest of api here |
15 }); | 15 }); |
16 </script> | 16 </script> |
17 </element> | 17 </element> |
18 | 18 |
19 --> | 19 --> |
20 | 20 |
21 <script> | 21 <script> |
22 module.exports.Element = sky.registerElement({ | 22 module.exports.Element = sky.registerElement( |
23 tagName: 'element', | 23 class extends Element { |
24 constructor: class extends Element { | 24 static get tagName() { return 'element'; } |
25 constructor (module) { | 25 constructor (module) { |
26 super(); | 26 super(); |
27 this.state = 'loading'; | 27 this.state = 'loading'; |
28 this.module = module; | 28 this.module = module; |
29 this.definedPrototype = sky.Element; | 29 this.definedPrototype = sky.Element; |
30 } | 30 } |
31 setPrototype(prototype) { | 31 setPrototype(prototype) { |
32 this.definedPrototype = prototype; | 32 this.definedPrototype = prototype; |
33 } | 33 } |
34 endTagParsedCallback() { | 34 endTagParsedCallback() { |
(...skipping 16 matching lines...) Expand all Loading... |
51 if (style) | 51 if (style) |
52 this.shadowRoot.append(style.cloneNode(true)); | 52 this.shadowRoot.append(style.cloneNode(true)); |
53 if (template) | 53 if (template) |
54 this.shadowRoot.append(template.cloneNode(true)); | 54 this.shadowRoot.append(template.cloneNode(true)); |
55 } | 55 } |
56 }; | 56 }; |
57 if (this.definedPrototype) | 57 if (this.definedPrototype) |
58 constructor.prototype = this.definedPrototype; | 58 constructor.prototype = this.definedPrototype; |
59 else | 59 else |
60 constructor.prototype = sky.Element; | 60 constructor.prototype = sky.Element; |
61 this.module.exports[constructorName] = this.registerElement({ | 61 constructor.tagName = this.getAttribute('name'); |
62 tagName: this.getAttribute('name'), | 62 constructor.shadow = style || template; |
63 shadow: style || template, | 63 this.module.exports[constructorName] = this.registerElement(constructor); |
64 constructor: constructor, | |
65 }); | |
66 delete this.definedPrototype; | 64 delete this.definedPrototype; |
67 delete this.module; | 65 delete this.module; |
68 this.state = 'loaded'; | 66 this.state = 'loaded'; |
69 } | 67 } |
70 }, | 68 } |
71 }); | 69 ); |
72 </script> | 70 </script> |
OLD | NEW |