Search code examples
mixinslifecyclelit-element

Lit-Element: first updated in class and mixin only fired once

Using lit-element, if a class has a firstUpdate method and extends a mixin that also has a firstUpdate method, only one of the two is fired.

See example here: https://stackblitz.com/edit/jmlit-element-sample-yhtv3h.

Spec clearly state that firstUpdated is called only once, but how to manage this conflict ?

Solution

  • Just call super.firstUpdated() in the class inheriting from the mixin and that should be enough

    firstUpdated(){
  super.firstUpdated();
  console.log("fired from index")
}

    demo: https://stackblitz.com/edit/jmlit-element-sample-cog6eq?file=src/index.js