Added static css styling for templates via a styles property.
This commit is contained in:
@ -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) {
|
||||
|
Reference in New Issue
Block a user