delite/CustomElement
delite/CustomElement
is a base class for non-visual custom elements, such as an element representing a data store.
It also serves as the base class for delite/Widget.
Behind the scenes, delite/CustomElement
provides many of the features mentioned in the
Introduction to delite and custom elements. In particular,
it parses attributes in declarative markup, for example converting:
<my-widget numProp="123"></my-widget>
into:
myWidget.numProp = 123;
The initialization methods in delite/CustomElement
correspond to the function names from the
Custom Elements specification, specifically createdCallback()
and attachedCallback()
.
When a custom element is instantiated via register.parse()
, createdCallback()
and attachedCallback()
are
automatically called.
When a custom element is instantiated programatically, createdCallback()
is automatically called,
but the application must call attachedCallback()
manually.
Alternately, if you extend delite/Widget
, you can use the placeAt()
method, which will attach the element to the specified DOM node and also call attachedCallback()
.
The requirement to manually call attachedCallback()
is because, for performance reasons,
delite does not set up document level listeners for DOM nodes being attached / removed from the document.
Also, delite/CustomElement
does not provide the attributeChangedCallback()
, but you can
find out when properties change by declaring the properties in your element's prototype, and then reacting to changes
in refreshRendering()
.
Finally, CustomElement provides common methods like on()
and destroy()
, but
it does not provide the delite/Widget
specific lifecycle methods
like render()
and postRender()
.