WX[dev-1.0.X]
API
interface IState
| constructor/property/method | value/usage |
|---|---|
| data:IState | The component data model. A <State> object must implement its data model. |
class State
| constructor/property/method | value/usage |
|---|---|
| customElement:CustomElement | The <CustomElement> bound to the <State>. |
constructor(<CustomElement>) |
Binds the <CustomElement> to the <State>. Can initialize <State> data properties here. Initialization outside the constructor will be overwrite by the <State> superclass. |
| protected attributesDataMapping():void | Trigger an initial update on connectedCallback, mapping inline html attributes with data. Data key is updated only if the attribute name is included in the <CustomElement> attrs property. This method overrides any state constructor settings. |
| updateProperties(data:any) | Trigger a data update without request the <CustomElement> template update. |
| update(data:any) | Trigger a data update and request the <CustomElement> template update. |
interface ICustomElement
| constructor/property/method | value/usage |
|---|---|
| state:State | The <State> bound to the <CustomElement>. A <CustomElement> must implement its state as an <State> object. |
| attrs:Array | The list of <CustomElement>.attributes names that must be mapped to the <State>.data. Mapping is triggered on connectedCallback. Use for inline html <State> initialization. |
| template:TemplateResult | The <CustomElement> UX definition. |
class CustomElement
| constructor/property/method | value/usage |
|---|---|
| state | The <State> implemention. |
| shadowDOM:boolean | If a shadowRoot`` must be created to encapsultate the ` from the rest of the DOM.
|
| inject:IInject | inline <styles> or <link> to inject in the template (valid only is shadowDOM is true). |
| costructor() | Initialize the state and binds the <CustomElement>. |
| createRenderRoot() | Override LitElement and return the <CustomElement>.shadowRoot or the <CustomElement> depending on shadowDOM value. |
| render() | Render the <CustomElement>.template. It is triggered by <State>.update({data}). |