Added dynamic styling to templates via a style function, with this properties can be used to create styles that automatically update. Or you can use static style values.

src/ignite-template.js

@@ -13,6 +13,7 @@ class IgniteTemplate {
         this.refs = [];
         this.callbacks = [];
         this.events = {};
+        this.styles = {};
 
         if (items) {
             for (var i = 0; i < items.length; i++) {
@@ -139,6 +140,24 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Sets a css style on this template and adds it to the element
+     * once it's constructed.
+     * @param {String} name 
+     * @param {String} value 
+     * @param {Boolean} priority
+     */
+    style(name, value, priority = null) {
+        if (value instanceof IgniteProperty) {
+            this.callbacks.push(value.attach((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
+            this.styles[name] = { name: name, value: value.value, priority: priority };
+        } else {
+            this.styles[name] = { name: name, value: value, priority: priority };
+        }
+
+        return this;
+    }
+
     /**
      * Constructs this template and adds it to the DOM if this template
      * has not already been constructed.
@@ -193,6 +212,13 @@ class IgniteTemplate {
             });
         }
 
+        //Set the styles on this element.
+        var keys = Object.keys(this.styles);
+        for (var i = 0; i < keys.length; i++) {
+            var style = this.styles[keys[i]];
+            this.element.style.setProperty(style.name, style.value, style.priority);
+        }
+
         //Set the properties on this element
         var keys = Object.keys(this.properties);
         for (var i = 0; i < keys.length; i++) {
@@ -265,7 +291,6 @@ class IgniteTemplate {
      * @param {any} newValue 
      */
     onClassChanged(oldValue, newValue) {
-        console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`);
         if (this.element) {
             if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
                 this.element.classList.remove(oldValue);
@@ -293,7 +318,6 @@ class IgniteTemplate {
      * @param {string} attributeName 
      */
     onAttributeChanged(oldValue, newValue, attributeName) {
-        console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
         if (this.element) {
             if (newValue == null || newValue == undefined) {
                 this.element.removeAttribute(attributeName);
@@ -313,7 +337,6 @@ class IgniteTemplate {
      * @param {string} propertyName 
      */
     onPropertyChanged(oldValue, newValue, propertyName) {
-        console.log(`Property changed, oldValue: ${oldValue} newValue: ${newValue} property: ${propertyName}`);
         if (this.element) {
             this.element[propertyName] = newValue;
         }
@@ -329,8 +352,6 @@ class IgniteTemplate {
      * @param {any} ref 
      */
     onRefChanged(oldValue, newValue, ref) {
-        console.log(`Ref changed, oldValue: ${oldValue} newValue: ${newValue}`);
-
         //Only set the reference value to ourself if it's not our element.
         //Otherwise we will get a never ending loop.
         if (this.element != newValue) {
@@ -345,8 +366,6 @@ class IgniteTemplate {
      * @param {any} eventName 
      */
     onEventChanged(oldValue, newValue, eventName) {
-        console.log(`Event changed: ${eventName}`);
-
         if (this.element) {
             if (oldValue !== null && oldValue !== undefined) {
                 this.element.removeEventListener(eventName, oldValue);
@@ -365,6 +384,19 @@ class IgniteTemplate {
             }
         }
     }
+
+    /**
+     * Called when a css value was changed and we need to update the styling.
+     * @param {any} oldValue 
+     * @param {any} newValue 
+     * @param {any} style 
+     */
+    onCssValueChanged(oldValue, newValue, name) {
+        if (this.element) {
+            this.element.style.setProperty(name, newValue, this.styles[name].priority);
+            this.styles[name].value = newValue;
+        }
+    }
 }
 
 class div extends IgniteTemplate {

src/sheet.js

@@ -12,6 +12,7 @@ class Sheet extends IgniteElement {
             items: ["1", "2"],
             href: "www.google.com",
             name: "default content",
+            color: "red",
             linkClick: this.onClick1,
             linkClick2: this.onClick2
         };
@@ -30,7 +31,9 @@ class Sheet extends IgniteElement {
                     new html("<h3>---- begin sheet's slot ----<h3>"),
                     new slot(this),
                     new html("<h3>---- end of slot ----</h3>"),
-                    new a("I go nowhere, but you can click me ;)").on("click", this.linkClick).on("click", this.linkClick2)
+                    new a("I go nowhere, but you can click me ;)")
+                        .on("click", this.linkClick).on("click", this.linkClick2)
+                        .style("color", this.color, "important")
                 )
             );
     }