Added ref functionality to get a ref from any template once it's created. Next up is property callback cleanup and disconnection upon element being removed.

src/ignite-template.js

@@ -9,6 +9,7 @@ class IgniteTemplate {
         this.tagName = null;
         this.element = null;
         this.properties = {};
+        this.refs = [];
 
         if (items) {
             for (var i = 0; i < items.length; i++) {
@@ -64,11 +65,26 @@ class IgniteTemplate {
         return this;
     }
 
+    ref(item) {
+        if (item instanceof IgniteProperty) {
+            this.refs.push((element) => {
+                item.value = element;
+            });
+        } else {
+            this.refs.push(item);
+        }
+
+        return this;
+    }
+
     construct(parent) {
         //Construct this element if we haven't already
         if (!this.element) {
             this.element = window.document.createElement(this.tagName);
             parent.appendChild(this.element);
+
+            //Invoke any refs we have
+            this.refs.forEach((ref) => { ref(this.element); });
         }
 
         //Set the classes on this element
@@ -116,6 +132,8 @@ class IgniteTemplate {
 
     onAttributeChanged(oldValue, newValue, attributeName) {
         console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
+        console.log("this element:");
+        console.log(this.element);
 
         if (newValue == null || newValue == undefined) {
             this.element.removeAttribute(attributeName);

src/main-app.js

@@ -15,12 +15,13 @@ class MainApp extends IgniteElement {
         return [
             "title",
             "name",
-            "href"
+            "href",
+            "sheet"
         ];
     }
 
     render() {
-        return new Sheet().property("name", this.name).property("href", this.href);
+        return new Sheet().property("name", this.name).property("href", this.href).ref(this.sheet);
     }
 }
 

src/sheet.js

@@ -26,7 +26,7 @@ class Sheet extends IgniteElement {
                 new div(
                     new html("<h2>this is before</h2>"),
                     new list(this.items, (item) => {
-                        return new html(`<h1>${item}</h1>`)
+                        return new a(`${item}`).attribute("href", this.href)
                     }),
                     new html("<h2>this is after</h2>"),
                     new a("this is a link").attribute("href", this.href)