Added static css styling for templates via a styles property.

src/ignite-element.js

@@ -19,6 +19,13 @@ class IgniteElement extends HTMLElement {
         return {};
     }
 
+    /**
+     * Returns any CSS styling code for this ignite element.
+     */
+    get styles() {
+        return null;
+    }
+
     /**
      * Creates the getters/setters for properties in this
      * ignite element and initializes everything.
@@ -70,6 +77,16 @@ class IgniteElement extends HTMLElement {
      * this function is called by the DOM upon this element being created somewhere.
      */
     connectedCallback() {
+        //See if a styling sheet has been created for this element if it's needed.
+        if (this.styles !== null && this.styles !== "") {
+            if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) {
+                var styleEl = document.createElement("style");
+                styleEl.classList.add(`_${this.tagName}_styling_`);
+                styleEl.innerHTML = this.styles;
+                document.body.prepend(styleEl);
+            }
+        }
+
         //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) {

src/main-app.js

@@ -26,6 +26,7 @@ class MainApp extends IgniteElement {
                     .class(this.sheetClass)
                     .child(new html(`<h3>Im a child for sheet!</h3>`))
             )
+            .child(new Sheet())
             .child(
                 new div(
                     new html(`<h1>This is a slot!`),

src/sheet.js

@@ -18,6 +18,15 @@ class Sheet extends IgniteElement {
         };
     }
 
+    get styles() {
+        return `
+            .sheet {
+                background-color: green;
+                color: #fff;
+            }
+        `;
+    }
+
     render() {
         return this.template
             .class(this.show)
@@ -34,7 +43,7 @@ class Sheet extends IgniteElement {
                     new a("I go nowhere, but you can click me ;)")
                         .on("click", this.linkClick).on("click", this.linkClick2)
                         .style("color", this.color, "important")
-                )
+                ).class("sheet")
             );
     }