Component class has the basic methods to control the component lifecycle, mapping the properties and hot rende ring the component template on properties updates.
HTMLElement
↳ Component
• attrs: any
Before the component inicialization occurs, attrs property contains a function that returns the inital attributes definition. When the component is initialized, attrs property can be used as common mutable object, filled with initial attributes and with the required listeners to render the template when those values updates.
memberof Component
• constructor: typeof Component
constructor contains the current class instancer reference of Component that allows to access to the definition values safely.
memberof Component
• data: any
Before the component inicialization occurs, data property contains a function that returns the inital data definition. When the component is initialized, data property can be used as common mutable object, filled with initial data and with the required listeners to render the template when those values updates.
memberof Component
• open: boolean = true
Creates an instance of Component, attaching the shadowRoot if it is not already attached, and initializing the compontent properties for Component.data and {@link Component.attributes}.
memberof Component
• get host(): Element
host getter returns the host element of the current custom component if it is a nested component. If it is the root one, the host getter returns undefined.
readonly
memberof Component
Element
• get root(): ShadowRoot
root getter returns the shadow root document from the current element.
readonly
memberof Component
ShadowRoot
• Static get attrs(): Object
attrs getter returns by default an empty object. Developers can overwrite this static getter to return their component attribute definition. Like with the vanilla syntax, the attributes must be defined before component implementation occurs. It is because the attribute definition is required to be mappend on {@link Component.observedAttributes} and to listen for changes on it using {@link Component.attributeChangedCallback}.
readonly
static
memberof Component
Object
• Static get data(): Object
Object
▸ created(): void
created method is called when the component initialization is finished and data containers are created and initialized with provided definitions.
memberof Component
void
▸ destroyed(): void
destroyed method is called when the component is detached and the listeners are dismissed.
memberof Component
void
▸ rendered(): void
rendered method is called when the component renderization (template and styles) is finished and the listeners are setted.
memberof Component
void
▸ styles(): string | void
styles function returns the component style definition as string. The definition must be CSS code and can contain properties like Component.data and Component.attrs but the styles are not updates-reactive, so if you need to change the appearance of the component dynamically use Component.attrs to update the element class.
memberof Component
string | void
▸ Abstract template(): any
template function returns the component template definition using the
html string tag provided. Inside that function Component.data and
Component.attrs are accesible via this variable, as well as
others properties defined by the user into the component definition.
memberof Component
any
▸ Static attach(tag, definition): void
attach method defines the custom element by the definition provided as argument associated to the tag provided too.
static
memberof Component
| Name | Type |
|---|---|
tag |
string |
definition |
Object |
void