Lifecycle Hooks

Molecule gives you several lifecycle hooks for your elements, the standard custom elements lifecycles and also additional hooks.

Standard Custom Element Hooks


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.


Called when the element is disconnected from the DOM. Use this callback to remove event listeners, etc.


Called when the custom element is moved to a new document.


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


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.


Called when the element is disconnected from the DOM. virtually the same as disconnectedCallback. Only exists for consistency with connected.


Called after every render. It gets passed a boolean representing, if this is the first render.


class ArticleList extends Element {
  static get properties() {
    return {
      selected: {
        value: '',
        type: String,
        attribute: true
      articles: () => []
  constructor() {
    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
Last Updated: 7/25/2018, 10:17:43 PM