Constructor is called twice

Question

I have the following code

render () {
     return html`<panel>${mobile
        ? html`${this.renderPane("side")}`
         :
         html `${this.renderPane("bottom")}`
      `
}

renderPane(slot: string) {
   return html `<x slot=${slot} .mobile=${this._isMobile}></x>`;
}

For some reason, when I resize the screen (mobile = true), the constructor for "x" lit element gets called again, and disconnectedCallback gets called, which removes the listeners that I added to connectedCallback. Does anyone know why that's happening?

Answer 1

Lit creates new DOM nodes when templates are swapped.

Instead of rendering different templates with the ternary, change only the attribute expression.

You have some invalid element tags in your question. I'm going to assume <panel> and <x> are some custom elements, and that mobile is a class field since I don't see where this is defined.

render () {
  return html`
    <panel-foo>
      <x-bar
        slot=${this.mobile ? 'side' : 'bottom'}
        .mobile=${this._isMobile}></x-bar>
    </panel-foo>`
  `;
}

This isn't a guarantee if there are conditional renders happening in trees above this.

I don't know how you're removing event listeners on disconnectedCallback but you probably want to make that independent of other instances. This can also matter if you have multiple instances of this element on the page.