sky/examples/htmlish/framework/htmlish.sky

SKY MODULE - exports some basic HTML-like elements
<import src="element.sky"/>

<!-- note: accessibility handling is not implemented yet, because the
           mojo ax service isn't yet ready -->

<import src="scrollable-block.sky">
<element name=html>
 <style>
  :host { display: scrollable-block; }
 </style>
</element>

<element name=head />
<element name=body />
<element name=p />

<element name=h1>
 <style>
  :host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
 </style>
</element>

<element name=h2>
 <style>
  :host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
 </style>
</element>

<element name=h3>
 <style>
  :host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
 </style>
</element>

<element name=h4>
 <style>
  :host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
 </style>
</element>

<element name=h5>
 <style>
  :host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
 </style>
</element>

<element name=h6>
 <style>
  :host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
 </style>
</element>

<element name=b>
 <style>
  :host { font-weight: bold; }
 </style>
</element>

<element name=data>
 <script>
  module.currentScript.parentNode.setPrototype({
    get value () {
      return this.getAttribute('value');
    },
    set value (newValue) {
      this.setAttribute('value', newValue);
    },
  });
 </script>
</element>

<element name=progress>
 <template>
  <div> ... </div>
 </template>
 <script>
  module.currentScript.parentNode.setPrototype({
    ...
  });
 </script>
</element>

<element name=details>
 <style>
  :host { display: block; }
  .outer { border: solid; }
  .header { display: inline; }
  .summary { display: inline; }
 </style>
 <template>
  <div class="outer">
   <div class="header">
    <div class="button">OPEN</div>
    <div class="summary"><content select="summary"/></div>
   </div>
   <div class="contents">
    <content/>
   </div>
  </div>
 </template>
 <script>
  module.currentScript.parentNode.setPrototype({
    init: function () {
      
    },
    open() {
      
    }
  });
 </script>
</element>