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

sky/examples/htmlish/framework/htmlish.sky

Index: sky/examples/htmlish/framework/htmlish.sky
diff --git a/sky/examples/htmlish/framework/htmlish.sky b/sky/examples/htmlish/framework/htmlish.sky
new file mode 100644
index 0000000000000000000000000000000000000000..1baf62f5f071aba219f88cf71fad5d95934c937d
--- /dev/null
+++ b/sky/examples/htmlish/framework/htmlish.sky
@@ -0,0 +1,109 @@
+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 -->
+
+<element name=html>
+ <!-- implement a scrollable viewport -->
+</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>