Moved properties over to a object model and added a resetProperties function that will reset properties to their default values. Fixed a few bugs and cleaned up the code a little more.

src/sheet.js

@@ -1,23 +1,18 @@
 import { IgniteElement } from './ignite-element.js';
-import { IgniteTemplate, div, html, list, a } from './ignite-template.js';
+import { IgniteTemplate, div, html, list, a, slot } from './ignite-template.js';
 
 class Sheet extends IgniteElement {
     constructor() {
         super();
-
-        this.show = false;
-        this.items = [];
-        this.href = "www.google.com";
-        this.name = "default content";
     }
 
     get properties() {
-        return [
-            "show",
-            "name",
-            "items",
-            "href"
-        ];
+        return {
+            show: false,
+            items: ["1", "2"],
+            href: "www.google.com",
+            name: "default content"
+        };
     }
 
     render() {
@@ -27,9 +22,12 @@ class Sheet extends IgniteElement {
                 new div(
                     new html("<h2>this is before</h2>"),
                     new list(this.items, (item) => {
-                        return new a(this.name).attribute("href", this.href)
+                        return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
                     }),
-                    new html("<h2>this is after</h2>")
+                    new html("<h2>this is after</h2>"),
+                    new html("<h3>---- begin sheet's slot ----<h3>"),
+                    new slot(this),
+                    new html("<h3>---- end of slot ----</h3>")
                 )
             );
     }