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/ignite-element.js

@@ -15,7 +15,7 @@ class IgniteElement extends HTMLElement {
      * Returns the properties for this ignite element.
      */
     get properties() {
-        return [];
+        return {};
     }
 
     /**
@@ -25,8 +25,11 @@ class IgniteElement extends HTMLElement {
     createProperties() {
         var props = this.properties;
 
-        for (var i = 0; i < props.length; i++) {
-            this[`_${props[i]}`] = new IgniteProperty();
+        var keys = Object.keys(props);
+        for (var i = 0; i < keys.length; i++) {
+            var prop = new IgniteProperty();
+            this[`_${keys[i]}`] = prop;
+            prop._value = props[keys[i]];
 
             ((propName) => {
                 Object.defineProperty(this, propName, {
@@ -38,7 +41,22 @@ class IgniteElement extends HTMLElement {
                         this[`_${propName}`].value = value;
                     }
                 });
-            })(props[i]);
+
+
+            })(keys[i]);
+        }
+    }
+
+    /**
+     * Resets the properties for this element back to their original default
+     * value.
+     */
+    resetProperties() {
+        var props = this.properties;
+
+        var keys = Object.keys(props);
+        for (var i = 0; i < keys.length; i++) {
+            this[keys[i]] = props[keys[i]];
         }
     }
 
@@ -47,9 +65,13 @@ class IgniteElement extends HTMLElement {
      * 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;
+        //If we don't already have a template, make sure we create one,
+        //this can happen if this element was constructed in the DOM instead of within a template.
+        if (!this.template) {
+            this.template = new IgniteTemplate();
+            this.template.element = this;
+            this.template.tagName = this.tagName;
+        }
 
         //Add any childNodes we have to the elements list within this
         this.childNodes.forEach((item) => this.elements.push(item));