Docs: add an example that uses the current APIs to define an <element>

sky/examples/htmlish/framework/element.sky

Index: sky/examples/htmlish/framework/element.sky
diff --git a/sky/examples/htmlish/framework/element.sky b/sky/examples/htmlish/framework/element.sky
new file mode 100644
index 0000000000000000000000000000000000000000..ab792677d4146a47f754fc2f6a92ac791d3522fd
--- /dev/null
+++ b/sky/examples/htmlish/framework/element.sky
@@ -0,0 +1,72 @@
+SKY MODULE - defines an <element> element
+<import src="sky:core" as="sky"/>
+
+<!-- usage:
+
+   <element name="tagname">
+    <style> style here (optional) </style>
+    <template> shadow tree here (optional) </template>
+    <script> // optional
+     module.currentScript.parentNode.setPrototype({
+       init: function () {
+         // constructor here
+       },
+       // rest of api here
+     });
+    </script>
+   </element>
+
+-->
+
+<script>
+ module.exports.Element = sky.registerElement({
+   tagName: 'element',
+   prototype: class extends Element {
+     constructor (module) {
+       super();
+       this.state = 'loading';
+       this.module = module;
+       this.definedPrototype = sky.Element;
+     }
+     setPrototype(prototype) {
+       this.definedPrototype = prototype;
+     }
+     endTagParsedCallback() {
+       let style = null;
+       let template = null;
+       let child = this.firstChild;
+       while (child && !(style && template)) {
+         if ((!style) && (child instanceof sky.StyleElement))
+           style = child;
+         if ((!template) && (template instanceof sky.TemplateElement))
+           template = child;
+         child = child.nextSibling;
+       }
+       let tagName = this.getAttribute('name');
+       let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1) + 'Element';
+       let constructor = function (module) {
+         super(module);
+         if (this.init)
+           this.init();
+         if (style)
+           this.shadowRoot.append(style.cloneNode(true));
+         if (template)
+           this.shadowRoot.append(template.cloneNode(true));
+         }
+       };
+       if (this.definedPrototype)
+         constructor.prototype = this.definedPrototype;
+       else
+         constructor.prototype = sky.Element;
+       this.module.exports[constructorName] = this.registerElement({
+         tagName: this.getAttribute('name'),
+         shadow: style || template,
+         constructor: constructor,
+       });
+       delete this.definedPrototype;
+       delete this.module;
+       this.state = 'loaded';
+     }
+   },
+ });
+</script>