ignite-html/docs.md

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

*   [IgniteElement][1]
    *   [Examples][2]
    *   [template][3]
    *   [elements][4]
    *   [variables][5]
        *   [Examples][6]
    *   [properties][7]
        *   [Examples][8]
    *   [styles][9]
        *   [Examples][10]
    *   [resetVariables][11]
    *   [getProperties][12]
    *   [setProperties][13]
        *   [Parameters][14]
    *   [resetProperties][15]
    *   [attachOnDisconnect][16]
        *   [Parameters][17]
    *   [render][18]
        *   [Examples][19]
    *   [init][20]
    *   [ready][21]
    *   [cleanup][22]
    *   [uuid][23]
*   [IgniteObject][24]
    *   [Parameters][25]
    *   [update][26]
    *   [setProperties][27]
        *   [Parameters][28]
    *   [create][29]
        *   [Parameters][30]
*   [IgniteHtml][31]
    *   [register][32]
        *   [Parameters][33]
    *   [render][34]
*   [IgniteTemplate][35]
    *   [Parameters][36]
    *   [Examples][37]
    *   [class][38]
        *   [Parameters][39]
        *   [Examples][40]
    *   [attribute][41]
        *   [Parameters][42]
    *   [value][43]
        *   [Parameters][44]
    *   [prop][45]
        *   [Parameters][46]
    *   [property][47]
        *   [Parameters][48]
    *   [variable][49]
        *   [Parameters][50]
    *   [reflect][51]
        *   [Parameters][52]
    *   [properties][53]
        *   [Parameters][54]
    *   [innerHTML][55]
        *   [Parameters][56]
    *   [innerText][57]
        *   [Parameters][58]
    *   [child][59]
        *   [Parameters][60]
    *   [ref][61]
        *   [Parameters][62]
    *   [on][63]
        *   [Parameters][64]
    *   [onClick][65]
        *   [Parameters][66]
    *   [onTouch][67]
        *   [Parameters][68]
    *   [onBlur][69]
        *   [Parameters][70]
    *   [onFocus][71]
        *   [Parameters][72]
    *   [onChange][73]
        *   [Parameters][74]
    *   [onInput][75]
        *   [Parameters][76]
    *   [onPaste][77]
        *   [Parameters][78]
    *   [onEnter][79]
        *   [Parameters][80]
    *   [onBackspace][81]
        *   [Parameters][82]
    *   [onResize][83]
        *   [Parameters][84]
    *   [onIntersect][85]
        *   [Parameters][86]
    *   [onSeen][87]
        *   [Parameters][88]
    *   [style][89]
        *   [Parameters][90]
    *   [hide][91]
        *   [Parameters][92]
    *   [invisible][93]
        *   [Parameters][94]
    *   [show][95]
        *   [Parameters][96]
    *   [visible][97]
        *   [Parameters][98]
    *   [id][99]
        *   [Parameters][100]
    *   [title][101]
        *   [Parameters][102]
    *   [for][103]
        *   [Parameters][104]
    *   [role][105]
        *   [Parameters][106]
    *   [checked][107]
        *   [Parameters][108]
    *   [disabled][109]
        *   [Parameters][110]
    *   [readonly][111]
        *   [Parameters][112]
    *   [type][113]
        *   [Parameters][114]
    *   [min][115]
        *   [Parameters][116]
    *   [max][117]
        *   [Parameters][118]
    *   [step][119]
        *   [Parameters][120]
    *   [data][121]
        *   [Parameters][122]
    *   [src][123]
        *   [Parameters][124]
    *   [href][125]
        *   [Parameters][126]
    *   [target][127]
        *   [Parameters][128]
    *   [name][129]
        *   [Parameters][130]
    *   [placeholder][131]
        *   [Parameters][132]
    *   [construct][133]
        *   [Parameters][134]
    *   [deconstruct][135]
*   [div][136]
    *   [Parameters][137]
*   [a][138]
    *   [Parameters][139]
*   [input][140]
    *   [Parameters][141]
*   [textarea][142]
    *   [Parameters][143]
*   [button][144]
    *   [Parameters][145]
*   [h1][146]
    *   [Parameters][147]
*   [h2][148]
    *   [Parameters][149]
*   [h3][150]
    *   [Parameters][151]
*   [h4][152]
    *   [Parameters][153]
*   [h5][154]
    *   [Parameters][155]
*   [h6][156]
    *   [Parameters][157]
*   [hr][158]
    *   [Parameters][159]
*   [p][160]
    *   [Parameters][161]
*   [nav][162]
    *   [Parameters][163]
*   [ul][164]
    *   [Parameters][165]
*   [li][166]
    *   [Parameters][167]
*   [span][168]
    *   [Parameters][169]
*   [small][170]
    *   [Parameters][171]
*   [strong][172]
    *   [Parameters][173]
*   [i][174]
    *   [Parameters][175]
*   [table][176]
    *   [Parameters][177]
*   [td][178]
    *   [Parameters][179]
*   [th][180]
    *   [Parameters][181]
*   [tr][182]
    *   [Parameters][183]
*   [thead][184]
    *   [Parameters][185]
*   [tbody][186]
    *   [Parameters][187]
*   [br][188]
    *   [Parameters][189]
*   [img][190]
    *   [Parameters][191]
*   [label][192]
    *   [Parameters][193]
*   [select][194]
    *   [Parameters][195]
*   [option][196]
    *   [Parameters][197]
*   [script][198]
    *   [Parameters][199]
*   [form][200]
    *   [Parameters][201]
*   [header][202]
    *   [Parameters][203]
*   [footer][204]
    *   [Parameters][205]
*   [progress][206]
    *   [Parameters][207]
*   [svg][208]
    *   [Parameters][209]
*   [g][210]
    *   [Parameters][211]
*   [path][212]
    *   [Parameters][213]
*   [circle][214]
    *   [Parameters][215]
*   [line][216]
    *   [Parameters][217]
*   [text][218]
    *   [Parameters][219]
    *   [Examples][220]
*   [html][221]
    *   [Parameters][222]
    *   [Examples][223]
*   [list][224]
    *   [Parameters][225]
    *   [Examples][226]
*   [slot][227]
    *   [Parameters][228]
    *   [Examples][229]
*   [pagination][230]
    *   [Parameters][231]
*   [pager][232]
    *   [Parameters][233]
    *   [items][234]
    *   [pageSize][235]
    *   [currentPage][236]
    *   [pageRange][237]
    *   [pageCount][238]
    *   [pages][239]
    *   [renderCallback][240]
*   [population][241]
    *   [Parameters][242]

## IgniteElement

**Extends HTMLElement**

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.

### Examples

```javascript
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);
```

```javascript
//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
}
```

```javascript
//If a template was created for a Ignite Element (like the previous example) it can be used just like any other template:
new MainApp()
```

### template

The ignite html template used to construct this element.

Type: [IgniteTemplate][35]

### elements

The child elements within this element upon creation.

Type: [Array][243]<[HTMLElement][244]>

### variables

Returns an object with all the variables for this ignite element. Variables
unlike properties have no callbacks or events, they are just data.

#### Examples

```javascript
get variables() {
 return {
     dialog: null,
     clickCallback: null
 };
}
```

Returns **[Object][245]** An object with properties that will be assigned to this ignite element as variables.

### properties

Returns an object with all the properties for this ignite element. If null or empty
then no properties will be created. To change a property and read it's current value see below.

#### Examples

```javascript
get properties() {
 return {
     show: false,
     title: "This is a title",
     items: [1, 2, 3]
 };
}
```

```javascript
//To change a property access it via this.PROP_NAME
this.show = false;

//To get a properties value access if via this.PROP_NAME
console.log(this.title);
```

Returns **[Object][245]** An object with properties that will be assigned to this ignite element.

### styles

Returns any CSS styling code for this ignite element. If this returns a non null
value the CSS will auto be injected into the current HTML page once and reused for the life
of the ignite element.

#### Examples

```javascript
get styles() {
 return `
     h1 {
         color: black;
     }
 `;
}
```

Returns **[String][246]** A string containing CSS code to be used with this ignite element.

### resetVariables

Resets the variables for this element back to their original default
values.

### getProperties

Gets all the property values from this element and returns it.

Returns **[Object][245]** An object with all of the property values for this ignite element.

### setProperties

Sets all the property values on this element.

#### Parameters

*   `props` &#x20;

### resetProperties

Resets the properties for this element back to their original default
values.

### attachOnDisconnect

Attaches a function to the on disconnect event for this element and returns a callback.

#### Parameters

*   `onDisconnect` **[Function][247]** Disconnect function to be called when on disconnect is raised.

Returns **any** IgniteCallback created for this callback.

### render

*   **See**: this.template is automatically created for each IgniteElement and must be used in the render() function.

Returns the template to be rendered for this element.

#### Examples

```javascript
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.`)
      );
}
```

Returns **any** An ignite template to be used to construct this ignite element.

### init

Called when this ignite element is being initialized. When this is called
the element has not been created. This is good for login checking code or special setup code.

### ready

Called when this ignite element is ready. This will invoke once all
ignite elements on the current page have been rendered and setup. You can safely know
all elements have be initialized and are ready once this is called.

### cleanup

Called when this ignite element should cleanup
any resources like events, timers, ect. This is called when the element
is being destroyed.

### uuid

Generates a uuid and returns it.

Returns **[String][246]** A unique string, for example: '1b23ec67-4d90-4992-9c5a-b5c0844deaef'

## IgniteObject

The outline of an IgniteObject which contains IgniteProperties.

### Parameters

*   `obj` **Any** The object to create an IgniteObject out of.

### update

Checks this IgniteObject for any properties not converted and automatically
converts them.

### setProperties

Sets the values of properties on this ignite object.

#### Parameters

*   `props` **([Object][245] | [IgniteObject][24])** The properties to set onto this ignite object.

### create

Creates an IgniteObject or Array of IgniteObjects and returns it.

#### Parameters

*   `obj` **([Object][245] | [Array][243])** The object to create an IgniteObject from.

Returns **[IgniteObject][24]** The created IgniteObject.

## IgniteHtml

Main helper class to access ignite html functions.

### register

Registers a new element to be rendered when render() is called.

#### Parameters

*   `name` **[String][246]** The tag name of the element to register.
*   `definition` **Any** The class definition of the element.

### render

Begins rendering all registered elements.

## 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.

### Parameters

*   `tagName` **[String][246]** The tag name of the element this template will construct. (optional, default `null`)
*   `children` **([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** An array of child elements to be added to this template. (optional, default `null`)

### Examples

```javascript
//You can easily create a template to construct any html element. See the following:
class div extends IgniteTemplate {
 constructor(...items) {
     super("div", items);
 }
}
```

```javascript
IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template:
template._constructors.push(() => console.log('constructed'));
```

```javascript
IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template:
template._destructors.push(() => console.log('destructed'));
```

### class

Adds a CSS class to be added once this template is constructed.

#### Parameters

*   `name` **([String][246] | IgniteProperty)** Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
*   `converter` **[Function][247]** Optional function that can convert the class name into a different one. (optional, default `null`)

#### Examples

```javascript
.class("row justify-content-center")
```

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### attribute

Adds a html element attribute to this template to be added once this template is constructed.

#### Parameters

*   `name` **[String][246]** The name of the attribute to add
*   `value` **([String][246] | IgniteProperty | [Function][247] | [Array][243]\<IgniteProperty>)** The value of the attribute to set, can be anything. If Property is passed it will auto update.
*   `converter` **[Function][247]** Optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### value

Sets the value of the element this template is constructing with the option to reflect changes
to the value.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set on the element.
*   `reflect` **([Boolean][249] | [Function][247])** Whether or not to reflect changes to the value of the element back to the property if one was used. If function passed it will be invoked on value change. Default is false. (optional, default `false`)
*   `converter` **[Function][247]** Optional function that can convert the value if needed. Default is null. (optional, default `null`)
*   `live` **[Boolean][249]** Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false. (optional, default `false`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### prop

Sets a property on the element this template will construct. (Shorthand for property())

#### Parameters

*   `name` **[String][246]** Name of the property to set.
*   `value` **(Any | IgniteProperty)** Value of the property to use. If a Property is passed the value will auto update.
*   `reflect` **[Boolean][249]** If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed. (optional, default `false`)
*   `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### property

Sets a property on the element this template will construct.

#### Parameters

*   `name` **[String][246]** Name of the property to set.
*   `value` **(Any | IgniteProperty)** Value of the property to use. If a Property is passed the value will auto update.
*   `reflect` **[Boolean][249]** If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed. (optional, default `false`)
*   `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### variable

Sets a variable on the element this template will construct.

#### Parameters

*   `name` **[String][246]** Name of the variable to set
*   `value` **(Any | IgniteProperty)** Value of the variable to set
*   `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### reflect

Makes a property on this template reflect its value back to the given target.
(You can reflect a property more than once if it's needed.)

#### Parameters

*   `name` **[String][246]** Name of the property to reflect.
*   `target` **(IgniteProperty | [Function][247])** The target for the value to be reflected to.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### properties

Adds a set of properties from an object to be added to this template once it's constructed.

#### Parameters

*   `props` **([Object][245] | [IgniteObject][24])** The object value that property names/values will be pulled from.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### innerHTML

Sets the inner html of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** InnerHTML to set for element. If a property is passed the html will auto update.
*   `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`)

Returns **any** This ignite template so funciton calls can be chained.

### innerText

Sets the inner text of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty | [Array][243]\<IgniteProperty> | [Function][247])** text to be set for this element. If a property is passed the text will auto update.
*   `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`)

Returns **any** This ignite template.

### child

Adds a single or series of children to be added once this template
is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.

#### Parameters

*   `items` **...([Number][248] | [String][246] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### ref

Adds a reference callback function to be invoked once this template is constructed. The function will be invoked
with the constructed HTMLElement. If an IgniteProperty is passed it's value will be set to the constructed HTMLElement once
the template is constructed.

#### Parameters

*   `refCallback` **([Function][247] | IgniteProperty)** The callback to be invoked with the HTMLElement of the element this template constructed.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### on

Adds an event by its name and the function to invoke once the event fires. Properties may be used
for the function, but their value must be a valid function in order to get a proper event callback.

#### Parameters

*   `eventName` **[String][246]** The name of the event to add.
*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onClick

Adds a click event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onTouch

Adds a touch event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onBlur

Adds a onblur event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onFocus

Adds a onfocus event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onChange

Adds a onchange event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onInput

Adds a oninput event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onPaste

Adds a on paste event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked once the event fires.

Returns **any** This ignite template.

### onEnter

Adds a on enter key press event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onBackspace

Adds a on backspace key press event handler to this template.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onResize

Adds a special on resize event handler to this template that will
fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onIntersect

Adds a special on intersect event handler to this template that will fire
once the element is in view. You can call this more than once to attach more than one callback.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### onSeen

Adds a special event handler for this template that will fire the first time the element is seen and does not repeat.

#### Parameters

*   `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked once this element becomes visible.

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### style

Adds a CSS property to this template with a value and priority.

#### Parameters

*   `name` **[String][246]** The name of the CSS property to set.
*   `value` **([String][246] | IgniteProperty)** The value to set for the property. If an IgniteProperty is used it will auto update this style.
*   `priority` **[String][246]** If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null (optional, default `null`)
*   `converter` **[Function][247]** Optional function to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### hide

Hides the element this template is constructing if the value is true.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
*   `converter` **[Function][247]** An optional function to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### invisible

Hides the element this template is constructing if the value is true.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
*   `converter` **[Function][247]** An optional function to convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### show

Shows the element this template is constructing if the value is true.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)**&#x20;
*   `converter` **[Function][247]**  (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### visible

Shows the element this template is constructing if the value is true.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)**&#x20;
*   `converter` **[Function][247]**  (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### id

Sets the id attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the id attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### title

Sets the title attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the title attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### for

Sets the for attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the for attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### role

Sets the role attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the for attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### checked

Adds a checked attribute to this template.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)** The value to set for the checked attribute.
*   `converter` **any** Optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### disabled

Adds a disabled attribute and class to this template.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)** A value to determine whether or not the element should be marked as disable or not.
*   `converter` **any** Optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### readonly

Adds a readonly attribute and class to this template.

#### Parameters

*   `value` **([Boolean][249] | IgniteProperty)** A value to determine whether or not the element should be marked as readonly or not.
*   `converter` **any** Optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### type

Sets the type attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### min

Sets the min attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### max

Sets the max attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### step

Sets the step attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### data

Sets a data attribute on the element to be constructed by this template.

#### Parameters

*   `name` **[String][246]** The name of the data attribute to set on the element this template will construct.
*   `value` **([String][246] | IgniteProperty)** The value to set for the data attribute of the element this template will construct.
*   `converter` **any** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### src

Sets the src attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the src attribute of the element to be constructed by this template.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### href

Sets the href attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the href attribute of the element to be constructed by this template.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### target

Sets the target attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the target attribute of the element to be constructed by this template.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### name

Sets the name attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the name attribute of the element to be constructed by this template.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### placeholder

Sets the placeholder attribute of the element to be constructed by this template.

#### Parameters

*   `value` **([String][246] | IgniteProperty)** The value to set for the placeholder attribute of the element.
*   `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`)

Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained.

### construct

Constructs this template and adds it to the DOM if this template
has not already been constructed.

#### Parameters

*   `parent` **[HTMLElement][244]** Parent element that will contain the constructed element.
*   `sibling` **[HTMLElement][244]** Optional sibling element that can be used to add the element adjacantly.

### deconstruct

Deconstructs this template and cleans up all resources to make sure
there are no memory leaks.

## div

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## a

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## input

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## textarea

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## button

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h1

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h2

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h3

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h4

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h5

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## h6

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## hr

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## p

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## nav

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## ul

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## li

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## span

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## small

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## strong

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## i

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## table

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## td

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## th

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## tr

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## thead

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## tbody

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## br

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## img

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## label

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## select

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## option

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## script

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## form

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## header

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## footer

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## progress

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## svg

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## g

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## path

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## circle

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## line

**Extends IgniteTemplate**

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

### Parameters

*   `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template.

## text

**Extends IgniteTemplate**

Text is a special template that will construct a text element and automatically update the dom
if it's content changes.

### Parameters

*   `text` **([String][246] | IgniteProperty)** The text to render within this text template.
*   `converter` **[Function][247]** An optional function that can be used to convert the text.

### Examples

```javascript
new text(`<script>Will show up as text</script>`)
```

## html

**Extends IgniteTemplate**

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

### Parameters

*   `code` **([String][246] | IgniteProperty)** HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.

### Examples

```javascript
new html(`<h1>Hello world!</h1>`)
```

## list

**Extends IgniteTemplate**

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

### Parameters

*   `list` **([Array][243] | IgniteProperty)** The list of items to construct within this template.
*   `forEachCallback` &#x20;
*   `reflect` **[Boolean][249]** If true any items removed from the DOM will be removed from the list if they exist. By default this is false. (optional, default `false`)

### Examples

```javascript
new list(["1", "2", "3"], (item) => {
 return new h1(item);
})
```

## slot

**Extends IgniteTemplate**

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. If classes, styles, or attributes are applied
to the slot they will be applied to the children of the slot.

### Parameters

*   `element` **[IgniteElement][1]** The parent IgniteElement that this slot is for.

### Examples

```javascript
//You must pass the ignite element who owns the slot of the first param.
new slot(this)
```

```javascript
//Slots can apply classes, attributes, and styles to children within the slot
new slot(this).class("active") //< Would apply .active to all children
```

```javascript
//You can also use properties to have dynamic classes, styles, or attributes on slot children
new slot(this).class(this.someClass)
```

## pagination

**Extends IgniteTemplate**

A pagination is a template that segments a list of items into pages based
on the items, page size, current page.

### Parameters

*   `list` **([Array][243] | IgniteProperty)** The list of items to paginate.
*   `pageSize` **([Number][248] | IgniteProperty)** The size of each page.
*   `currentPage` **([Number][248] | IgniteProperty)** The current page to display.
*   `forEach` &#x20;

## pager

**Extends IgniteTemplate**

A pager is a template that converts pagination information into elements
to form a page selection.

### Parameters

*   `items` **([Number][248] | [Array][243] | IgniteProperty)** The items to construct pages for.
*   `pageSize` **([Number][248] | IgniteProperty)** The number of items to show per page.
*   `currentPage` **([Number][248] | IgniteProperty)** The current page being shown.
*   `pageRange` **([Number][248] | IgniteProperty)** The number of pages that can be selected at a time. 3 is typically chosen.
*   `renderCallback` &#x20;

### items

Type: ([Number][248] | [Array][243] | IgniteProperty)

### pageSize

Type: ([Number][248] | IgniteProperty)

### currentPage

Type: ([Number][248] | IgniteProperty)

### pageRange

Type: ([Number][248] | IgniteProperty)

### pageCount

Type: [Number][248]

### pages

Type: [Array][243]<[IgniteTemplate][35]>

### renderCallback

## population

**Extends IgniteTemplate**

An ignite template that can construct a population of items
based on a count.

### Parameters

*   `count` **([Number][248] | IgniteProperty | [Array][243]\<IgniteProperty>)** The number of items in this population.
*   `forEach` &#x20;
*   `converter` **[Function][247]** A converter to be used to convert the count if needed. (optional, default `null`)

[1]: #igniteelement

[2]: #examples

[3]: #template

[4]: #elements

[5]: #variables

[6]: #examples-1

[7]: #properties

[8]: #examples-2

[9]: #styles

[10]: #examples-3

[11]: #resetvariables

[12]: #getproperties

[13]: #setproperties

[14]: #parameters

[15]: #resetproperties

[16]: #attachondisconnect

[17]: #parameters-1

[18]: #render

[19]: #examples-4

[20]: #init

[21]: #ready

[22]: #cleanup

[23]: #uuid

[24]: #igniteobject

[25]: #parameters-2

[26]: #update

[27]: #setproperties-1

[28]: #parameters-3

[29]: #create

[30]: #parameters-4

[31]: #ignitehtml

[32]: #register

[33]: #parameters-5

[34]: #render-1

[35]: #ignitetemplate

[36]: #parameters-6

[37]: #examples-5

[38]: #class

[39]: #parameters-7

[40]: #examples-6

[41]: #attribute

[42]: #parameters-8

[43]: #value

[44]: #parameters-9

[45]: #prop

[46]: #parameters-10

[47]: #property

[48]: #parameters-11

[49]: #variable

[50]: #parameters-12

[51]: #reflect

[52]: #parameters-13

[53]: #properties-1

[54]: #parameters-14

[55]: #innerhtml

[56]: #parameters-15

[57]: #innertext

[58]: #parameters-16

[59]: #child

[60]: #parameters-17

[61]: #ref

[62]: #parameters-18

[63]: #on

[64]: #parameters-19

[65]: #onclick

[66]: #parameters-20

[67]: #ontouch

[68]: #parameters-21

[69]: #onblur

[70]: #parameters-22

[71]: #onfocus

[72]: #parameters-23

[73]: #onchange

[74]: #parameters-24

[75]: #oninput

[76]: #parameters-25

[77]: #onpaste

[78]: #parameters-26

[79]: #onenter

[80]: #parameters-27

[81]: #onbackspace

[82]: #parameters-28

[83]: #onresize

[84]: #parameters-29

[85]: #onintersect

[86]: #parameters-30

[87]: #onseen

[88]: #parameters-31

[89]: #style

[90]: #parameters-32

[91]: #hide

[92]: #parameters-33

[93]: #invisible

[94]: #parameters-34

[95]: #show

[96]: #parameters-35

[97]: #visible

[98]: #parameters-36

[99]: #id

[100]: #parameters-37

[101]: #title

[102]: #parameters-38

[103]: #for

[104]: #parameters-39

[105]: #role

[106]: #parameters-40

[107]: #checked

[108]: #parameters-41

[109]: #disabled

[110]: #parameters-42

[111]: #readonly

[112]: #parameters-43

[113]: #type

[114]: #parameters-44

[115]: #min

[116]: #parameters-45

[117]: #max

[118]: #parameters-46

[119]: #step

[120]: #parameters-47

[121]: #data

[122]: #parameters-48

[123]: #src

[124]: #parameters-49

[125]: #href

[126]: #parameters-50

[127]: #target

[128]: #parameters-51

[129]: #name

[130]: #parameters-52

[131]: #placeholder

[132]: #parameters-53

[133]: #construct

[134]: #parameters-54

[135]: #deconstruct

[136]: #div

[137]: #parameters-55

[138]: #a

[139]: #parameters-56

[140]: #input

[141]: #parameters-57

[142]: #textarea

[143]: #parameters-58

[144]: #button

[145]: #parameters-59

[146]: #h1

[147]: #parameters-60

[148]: #h2

[149]: #parameters-61

[150]: #h3

[151]: #parameters-62

[152]: #h4

[153]: #parameters-63

[154]: #h5

[155]: #parameters-64

[156]: #h6

[157]: #parameters-65

[158]: #hr

[159]: #parameters-66

[160]: #p

[161]: #parameters-67

[162]: #nav

[163]: #parameters-68

[164]: #ul

[165]: #parameters-69

[166]: #li

[167]: #parameters-70

[168]: #span

[169]: #parameters-71

[170]: #small

[171]: #parameters-72

[172]: #strong

[173]: #parameters-73

[174]: #i

[175]: #parameters-74

[176]: #table

[177]: #parameters-75

[178]: #td

[179]: #parameters-76

[180]: #th

[181]: #parameters-77

[182]: #tr

[183]: #parameters-78

[184]: #thead

[185]: #parameters-79

[186]: #tbody

[187]: #parameters-80

[188]: #br

[189]: #parameters-81

[190]: #img

[191]: #parameters-82

[192]: #label

[193]: #parameters-83

[194]: #select

[195]: #parameters-84

[196]: #option

[197]: #parameters-85

[198]: #script

[199]: #parameters-86

[200]: #form

[201]: #parameters-87

[202]: #header

[203]: #parameters-88

[204]: #footer

[205]: #parameters-89

[206]: #progress

[207]: #parameters-90

[208]: #svg

[209]: #parameters-91

[210]: #g

[211]: #parameters-92

[212]: #path

[213]: #parameters-93

[214]: #circle

[215]: #parameters-94

[216]: #line

[217]: #parameters-95

[218]: #text

[219]: #parameters-96

[220]: #examples-7

[221]: #html

[222]: #parameters-97

[223]: #examples-8

[224]: #list

[225]: #parameters-98

[226]: #examples-9

[227]: #slot

[228]: #parameters-99

[229]: #examples-10

[230]: #pagination

[231]: #parameters-100

[232]: #pager

[233]: #parameters-101

[234]: #items

[235]: #pagesize

[236]: #currentpage

[237]: #pagerange

[238]: #pagecount

[239]: #pages

[240]: #rendercallback

[241]: #population

[242]: #parameters-102

[243]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[244]: https://developer.mozilla.org/docs/Web/HTML/Element

[245]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[246]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[247]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[248]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[249]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean