Added static css styling for templates via a styles property.

This commit is contained in:
2020-08-11 13:45:54 -07:00
parent 1d13c50711
commit 057960db8a
3 changed files with 28 additions and 1 deletions

View File

@ -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) {