Class 使用 mwc-tab-bar 切换时，放置在 Web 组件上的内容不会持续存在

Question

使用点亮元素2，

我注意到当我使用 mwc-tab-bar 切换选项卡时，<transactions-element class="hide"></transactions-element> 上的 class="hide" 仍然存在。

这是为什么？


  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');
  }

}

Answer 1

任何时候调用 _renderCurrentView 都会销毁更改。最好更新有状态的属性和 re-render

添加反应式属性（例如 hideTransactionelement）

设置于：

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

将类映射导入模块 https://lit.dev/docs/templates/directives/#classmap

并更新渲染

const classes = { hide: this.hideTransactionelement };

return html`<transactions-element class=${classMap(classes)}  ></transactions-element>`;

Class 使用 mwc-tab-bar 切换时，放置在 Web 组件上的内容不会持续存在

Class placed on web component does not persist when toggled with mwc-tab-bar

web-component

lit