0

Using lit element 2,

I notice when I toggle in the tabs with mwc-tab-bar, the class="hide" on <transactions-element class="hide"></transactions-element> does persist.

Why is this?


  render() {
    return html`
      <mwc-tab-bar @MDCTabBar:activated="${this._setCurrentTabView}">
        <mwc-tab
        data-el="transactions-element"
        label="transactions"></mwc-tab>
        <mwc-tab
        data-el="foo-element"
        label="foo"></mwc-tab>
      </mwc-tab-bar>

      <div class="main">
        <main>${this._renderCurrentView()}</main>
      </div>
    `
  }

  _setCurrentTabView(e) {
    const {index} = e.detail;
    const tabs = this.renderRoot.querySelectorAll('mwc-tab');
    const { el } = tabs[index].dataset;
    this._fadeOutPage(this.currentView);
  }
  
  _renderCurrentView() {
    switch (this.currentView) {
      case 'transactions-element':
        import('./transactions-element.js');
        return html`<transactions-element></transactions-element>`;
      case 'foo-element':
        import('./foo-element.js');
        return html`<foo-element></foo-element>`;
      default:
        import('./not-found-view.js');
        return html`<not-found-view></not-found-view>`;
    }
  }

  _fadeOutPage(el) {
    const fromEl = this.renderRoot.querySelector(el);
    fromEl.classList.add('hide');
  }

}
dman
  • 10,406
  • 18
  • 102
  • 201

1 Answers1

1

any time _renderCurrentView is called and changes will be destroyed. It's better to update a stateful property and re-render

Add a reactive property (e.g hideTransactionelement)

Set in:

_fadeOutpage(el){
 this.hideTransactionelement = true;
}

import classmap into module https://lit.dev/docs/templates/directives/#classmap

and update render

const classes = { hide: this.hideTransactionelement };

return html`<transactions-element class=${classMap(classes)}  ></transactions-element>`;
Tim Ker
  • 214
  • 1
  • 12
  • Does this mean every time _renderCurrentView the webcomponent will be stamped over and over? – dman Apr 26 '22 at 16:05
  • not sure what you mean by stamped. but when i said "destroyed", that wasn't completely accurate, transactions-element will be updated You can try putting logging in component or other life cycle constuctor,https://lit.dev/docs/components/lifecycle/ or add the current time to a render to see when it updates – Tim Ker Apr 26 '22 at 22:24