Added deconstruct functionality and cleanup code so that everything gets correctly cleaned up once a element is removed from the DOM. Added a new property template that allows properties to be used as content or html anywhere within a template's children. Next up is slot support.

src/ignite-element.js

@@ -5,16 +5,24 @@ class IgniteElement extends HTMLElement {
     constructor() {
         super();
 
+        this.onDisconnected = null;
         this.template = null;
         this.createProperties();
     }
 
-    properties() {
+    /**
+     * Returns the properties for this ignite element.
+     */
+    get properties() {
         return [];
     }
 
+    /**
+     * Creates the getters/setters for properties in this
+     * ignite element and initializes everything.
+     */
     createProperties() {
-        var props = this.properties();
+        var props = this.properties;
 
         for (var i = 0; i < props.length; i++) {
             this[`_${props[i]}`] = new IgniteProperty();
@@ -33,13 +41,47 @@ class IgniteElement extends HTMLElement {
         }
     }
 
+    /**
+     * Setups this ignite element and constructs it's template when
+     * this function is called by the DOM upon this element being created somewhere.
+     */
     connectedCallback() {
         this.template = new IgniteTemplate();
         this.template.element = this;
+        this.template.tagName = this.tagName;
 
-        this.render().construct(this);
+        //Make sure the render template is our template, if not, add it as a child.
+        var renderTemplate = this.render();
+        if (renderTemplate !== this.template && renderTemplate) {
+            this.template.child(renderTemplate);
+        } else if (!renderTemplate) {
+            console.warn(`RenderTemplate was null for element: ${this.tagName}, is render() returning null or not returning anything?`);
+        }
+
+        //Construct our template.
+        this.template.construct(this.parentElement);
     }
 
+    /**
+     * Cleanups this element and deconstructs everything when this element is removed from
+     * the DOM.
+     */
+    disconnectedCallback() {
+        //If we still have a reference to our template, deconstruct it.
+        if (this.template) {
+            this.template.deconstruct();
+        }
+
+        //If we have a onDisconnected callback, call it and then remove the reference.
+        if (this.onDisconnected) {
+            this.onDisconnected();
+            this.onDisconnected = null;
+        }
+    }
+
+    /**
+     * Returns the template to be rendered for this element.
+     */
     render() {
         return null;
     }