From 057960db8a0adcd0b1eba5f7236a291269cb84ad Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 11 Aug 2020 13:45:54 -0700
Subject: [PATCH] Added static css styling for templates via a styles property.
---
src/ignite-element.js | 17 +++++++++++++++++
src/main-app.js | 1 +
src/sheet.js | 11 ++++++++++-
3 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/src/ignite-element.js b/src/ignite-element.js
index e8fea34..3276512 100644
--- a/src/ignite-element.js
+++ b/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) {
diff --git a/src/main-app.js b/src/main-app.js
index 0169021..d8768ef 100644
--- a/src/main-app.js
+++ b/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!`),
diff --git a/src/sheet.js b/src/sheet.js
index 6ddc332..bb90c48 100644
--- a/src/sheet.js
+++ b/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")
);
}