Implemented a ready function that is only invoked once all ignite elements on a page are ready.

src/ignite-element.js

@@ -1,4 +1,4 @@
-import { IgniteProperty } from './ignite-html.js';
+import { IgniteProperty, IgniteCallback } from './ignite-html.js';
 import { IgniteTemplate } from './ignite-template.js';
 
 /**
@@ -55,6 +55,7 @@ class IgniteElement extends HTMLElement {
         this.template = null;
         this.elements = [];
         this.createProperties();
+        this.readyCallback = new IgniteCallback(() => this.ready());
     }
 
     /**
@@ -207,6 +208,9 @@ class IgniteElement extends HTMLElement {
 
         //Leave the rendering context.
         IgniteRenderingContext.leave();
+
+        //Let the rendering context know this element is ready.
+        IgniteRenderingContext.ready(this.readyCallback);
     }
 
     /**
@@ -234,6 +238,12 @@ class IgniteElement extends HTMLElement {
                 this.onDisconnected();
                 this.onDisconnected = null;
             }
+
+            //Detach the after render callback
+            this.readyCallback.disconnect();
+
+            //Cleanup this element if we need to.
+            this.cleanup();
         }, 1);
     }
 
@@ -256,6 +266,24 @@ class IgniteElement extends HTMLElement {
     render() {
         return null;
     }
+
+    /**
+     * Called when this ignite element is ready. This will invoke once all
+     * ignite elements on the current page have been rendered and setup. You can safely know
+     * all elements have be initialized and are ready once this is called.
+     */
+    ready() {
+
+    }
+
+    /**
+     * Called when this ignite element should cleanup
+     * any resources like events, timers, ect. This is called when the element
+     * is being destroyed.
+     */
+    cleanup() {
+
+    }
 }
 
 export {