sky/examples/htmlish/framework/element.sky

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(
   class extends Element {
     static get tagName() { return 'element'; }
     constructor (hostModule) {
       super(hostModule);
       this.state = 'loading';
       this.module = hostModule;
       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 (hostModule) {
         super(hostModule);
         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;
       constructor.tagName = this.getAttribute('name');
       constructor.shadow = style || template;
       this.module.exports[constructorName] = this.registerElement(constructor);
       delete this.definedPrototype;
       delete this.module;
       this.state = 'loaded';
     }
   }
 );
</script>