Allow customize the tab content

[abdonrd]

I'm submitting a:

• [ ] bug report
• [x] feature request

What OS are you using? macOS

Current behavior: With the new version there is no option to customize the tab content.

For example, I want to add this counters:

[abdonrd]

@asyncLiz Any news here?

[asyncLiz]

This is in the spirit of Material, but we don't think that supporting arbitrary tab content is a good approach.

Arbitrary content (via <slot>) comes with a heavy cost: more burden is placed on us to support things that slots allow, some of which is against Material spec.

This somewhat relates to #602. It should be trivial for a user to extend <mwc-tab> with their own <my-tab-with-badge> and use it to add support for things we do not directly maintain.

@customElement('my-tab-with-badge')
export class MyTab extends Tab {
  @property()
  badgeCount = 1;

  /** @override */
  protected renderLabel() {
    return html`${this.label} <my-badge>${this.badgeCount}</my-badge>`;
  }
}

This allows for "Material-inspired" design without placing the burden directly on us to support things not currently in spec.

Do you think this type of approach would help fullfill your use case?

[abdonrd]

Thanks for the info, @asyncLiz!

And yes, that could work well for me!

[abdonrd]

Any news here? Thanks!

[asyncLiz]

There's no update to give here. We're mostly focused on internal tooling and theming right now.

Some other platforms have asked for similar badge-like UXs, so it's on design's mind to get something like this in spec, but we don't have any update or timeframe to offer for that.

As far as extensibility, that's a bit lower on priority with the current work we're doing, but it'd fall under #602 and work similarly to how I mentioned.

[abdonrd]

Any news? Thanks in advance!

[asyncLiz]

Obsolete with M3