Added a rendering context which replaces the rendered flag on ignite elements so that properties won't return their value if we are rendering. This fixes an issue where lists would get messed up since they reconstruct whenever the list changes.

src/ignite-element.js

@@ -1,6 +1,10 @@
 import { IgniteProperty } from './ignite-html.js';
 import { IgniteTemplate } from './ignite-template.js';
 
+/**
+ * The outline of a ignite element that extends the html element
+ * and can be used to create custom components.
+ */
 class IgniteElement extends HTMLElement {
     constructor() {
         super();
@@ -9,7 +13,6 @@ class IgniteElement extends HTMLElement {
         this.template = null;
         this.elements = [];
         this.createProperties();
-        this.rendered = false;
     }
 
     /**
@@ -42,7 +45,7 @@ class IgniteElement extends HTMLElement {
             ((propName) => {
                 Object.defineProperty(this, propName, {
                     get: function () {
-                        if (this.rendered) {
+                        if (IgniteRenderingContext.rendering == false) {
                             return this[`_${propName}`].value;
                         } else {
                             return this[`_${propName}`];
@@ -98,6 +101,9 @@ class IgniteElement extends HTMLElement {
         //Add any childNodes we have to the elements list within this
         this.childNodes.forEach((item) => this.elements.push(item));
 
+        //Enter a rendering context so properties don't expose their values until we are done.
+        IgniteRenderingContext.enter();
+
         //Make sure the render template is our template, if not, add it as a child.
         var renderTemplate = this.render();
         if (renderTemplate !== this.template && renderTemplate) {
@@ -107,10 +113,14 @@ class IgniteElement extends HTMLElement {
         }
 
         //Construct our template.
-        this.template.construct(this.parentElement);
+        try {
+            this.template.construct(this.parentElement);
+        } catch (error) {
+            console.error(error);
+        }
 
-        //Set rendered to true so that all future properties return their values.
-        this.rendered = true;
+        //Leave the rendering context.
+        IgniteRenderingContext.leave();
     }
 
     /**