DNA

Progressive Web Components.

Life cycle

DNA components follow the Custom Element life cycle specification, with the addition of the propertyChangedCallback and render methods. The complete list of methods is:

• connectedCallback

• disconnectedCallback

• attributeChangedCallback

• propertyChangedCallback

• stateChangedCallback

Life cycle methods are dispatched by the DNA Virtual DOM implementation by default. When you are not using templates to update the tree, always use the DOM helper.

connectedCallback

From MDN:

Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. connectedCallback may be called once your element is no longer connected, use Node.isConnected to make sure.

disconnectedCallback

From MDN:

Invoked each time the custom element is disconnected from the document's DOM.

attributeChangedCallback

From MDN:

Invoked each time one of the custom element's attributes is added, removed, or changed.

The method receives the attribute name as first argument, as well as the new value and the previous value (default null).

propertyChangedCallback

This method is very similar to attributeChangedCallback and it is invoked each time one of the element's property is changed.

The signature is equivalent too: it receives the property name as first argument, as well as the new value and the previous value (default undefined).

stateChangedCallback

The same of propertyChangedCallback, but for state properties.