IgniteElement

The outline of a Ignite Element that extends the html element and can be used to create custom components. Ignite Element's use an Ignite Template for the render function.

new IgniteElement()

Extends HTMLElement

Example
class MainApp extends IgniteElement {
  constructor() {
      super();
  }

  get properties() {
      return {
      };
  }

  render() {
      return this.template
          .child(
              new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
              new h4(`Adding more fire to the web.`)
          );
   }
}

customElements.define("main-app", MainApp);
//If you want to easily use an Ignite Element with templates see the following which can be added
//to any component file
class MainAppTemplate extends IgniteTemplate {
  constructor(...children) {
      super("main-app", children);
  }
}

export {
 MainAppTemplate as MainApp
}
//If a template was created for a Ignite Element (like the previous example) it can be used just like any other template:
new MainApp()
Instance Members
properties
styles
resetProperties()
render()

IgniteTemplate

The outline of a ignite template. Templates are a blueprint that specify's how to construct an element and then can be used to construct the element. Everything starts with a template.

new IgniteTemplate(tagName: String, children: (String | Number | IgniteProperty | IgniteTemplate))
Parameters
tagName (String = null) The tag name of the element this template will construct.
children ((String | Number | IgniteProperty | IgniteTemplate) = null) An array of child elements to be added to this template.
Example
//You can easily create a template to construct any html element. See the following:
class div extends IgniteTemplate {
 constructor(...items) {
     super("div", items);
 }
}
Instance Members
class(name, converter)
attribute(name, value, converter)
property(name, value, reflect, converter)
child(items)
ref(refCallback)
on(eventName, eventCallback)
onClick(eventCallback)
onEnter(eventCallback)
style(name, value, priority, converter)
construct(parent, sibling)
deconstruct()

div

An ignite template that can be used to construct a div element.

new div(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

a

An ignite template that can be used to construct a hyperlink element.

new a(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

input

An ignite template that can be used to construct a input element.

new input(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

button

An ignite template that can be used to construct a button element.

new button(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

h1

An ignite template that can be used to construct a h1 element.

new h1(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

h2

An ignite template that can be used to construct a h2 element.

new h2(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

h3

An ignite template that can be used to construct a h3 element.

new h3(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

h4

An ignite template that can be used to construct a h4 element.

new h4(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

h5

An ignite template that can be used to construct a h5 element.

new h5(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

p

An ignite template that can be used to construct a p element.

new p(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

span

An ignite template that can be used to construct a span element.

new span(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

i

An ignite template that can be used to construct an i element.

new i(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

br

An ignite template that can be used to construct a br element.

new br(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

img

An ignite template that can be used to construct a img element.

new img(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children (...(String | Number | IgniteProperty | IgniteTemplate)) A series of children to be added to this template.

html

Html is a special template that can construct raw html or properties into the dom and automatically update the dom if the property changes.

new html(code: (String | IgniteProperty))

Extends IgniteTemplate

Parameters
code ((String | IgniteProperty)) HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.
Example
new html(`<h1>Hello world!</h1>`)

list

A special ignite template that constructs a list of items using a template that is dynamically created for each item.

new list(list: (Array | IgniteProperty), forEach: Function)

Extends IgniteTemplate

Parameters
list ((Array | IgniteProperty)) The list of items to construct within this template.
forEach (Function) A function that construct a template for an item from the list that is passed to it.
Example
new list(["1", "2", "3"], (item) => {
 return new h1(item);
})

slot

A slot template that mimicks the functionality of a slot element in Web Components. This can be used to place children of a IgniteElement anywhere in the DOM. Slots don't actually construct an element, they simply just place children in place where the slot was used.

new slot(element: IgniteElement)

Extends IgniteTemplate

Parameters
element (IgniteElement) The parent IgniteElement that this slot is for.
Example
new slot(this)