Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(142)

Side by Side Diff: sky/examples/htmlish/framework/element.sky

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
Patch Set: Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | sky/examples/htmlish/framework/htmlish.sky » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 SKY MODULE - defines an <element> element
2 <import src="sky:core" as="sky"/>
3
4 <!-- usage:
5
6 <element name="tagname">
7 <style> style here (optional) </style>
8 <template> shadow tree here (optional) </template>
9 <script> // optional
10 module.currentScript.parentNode.setPrototype({
11 init: function () {
12 // constructor here
13 },
14 // rest of api here
15 });
16 </script>
17 </element>
18
19 -->
20
21 <script>
22 module.exports.Element = sky.registerElement({
23 tagName: 'element',
24 prototype: class extends Element {
25 constructor (module) {
26 super();
27 this.state = 'loading';
28 this.module = module;
29 this.definedPrototype = sky.Element;
30 }
31 setPrototype(prototype) {
32 this.definedPrototype = prototype;
33 }
34 endTagParsedCallback() {
35 let style = null;
36 let template = null;
37 let child = this.firstChild;
38 while (child && !(style && template)) {
39 if ((!style) && (child instanceof sky.StyleElement))
40 style = child;
41 if ((!template) && (template instanceof sky.TemplateElement))
42 template = child;
43 child = child.nextSibling;
44 }
45 let tagName = this.getAttribute('name');
46 let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1) + 'Element';
47 let constructor = function (module) {
48 super(module);
49 if (this.init)
50 this.init();
51 if (style)
52 this.shadowRoot.append(style.cloneNode(true));
53 if (template)
54 this.shadowRoot.append(template.cloneNode(true));
55 }
56 };
57 if (this.definedPrototype)
58 constructor.prototype = this.definedPrototype;
59 else
60 constructor.prototype = sky.Element;
61 this.module.exports[constructorName] = this.registerElement({
62 tagName: this.getAttribute('name'),
63 shadow: style || template,
64 constructor: constructor,
65 });
66 delete this.definedPrototype;
67 delete this.module;
68 this.state = 'loaded';
69 }
70 },
71 });
72 </script>
OLDNEW
« no previous file with comments | « no previous file | sky/examples/htmlish/framework/htmlish.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698