Lifecycle Hooks
Molecule gives you several lifecycle hooks for your elements, the standard custom elements lifecycles and also additional hooks.
Standard Custom Element Hooks
connectedCallback
Called when the element is connected to the DOM. But since you have to call super.connectedCallback
in your
callback, your custom connectedCallback
is actually run after the first render. Because of this confusion, using connectedCallback
is
discouraged.
disconnectedCallback
Called when the element is disconnected from the DOM. Use this callback to remove event listeners, etc.
adoptedCallback
Called when the custom element is moved to a new document.
attributeChangedCallback
Invoked when one of the custom element’s attributes is added, removed, or changed. Since Molecule handles
your attributes for you, using attributeChangedCallback
is discouraged.
Molecule Hooks
connected
Called after the element is connected to the DOM and after the property accessors are defined, but before the first render. Use
this instead of connectedCallback
.
disconnected
Called when the element is disconnected from the DOM. virtually the same as disconnectedCallback
. Only exists for
consistency with connected
.
afterRender
Called after every render. It gets passed a boolean representing, if this is the first render.
Example
class ArticleList extends Element {
static get properties() {
return {
selected: {
value: '',
type: String,
attribute: true
},
articles: () => []
}
}
constructor() {
super();
this._articleChanged = this._articleChanged.bind(this);
}
render() {
// your template
}
connected() {
this.addEventListener('article-changed', this._articleChanged);
fetch(/* api url */)
.then(res => this.articles = res.json());
}
disconnected() {
this.removeEventListener('article-changed', this._articleChanged);
}
_articleChanged(event) {
// handle the event
}
}