[Question]: How to create custom cds-tab component

[iv-arsenovic-levi9-com]

Question for Carbon

Hello,

I am trying to create and override the cds-tab element in my Web Component using Lit 3.

I referred to the Carbon Web Components documentation on using custom styles, but when I tried to implement the same, I encountered issues:

The component renders as "blank" and is not functional.
Events, such as clicks, are not working properly.
Below is the code for my custom component:

import { css } from 'lit-element';
import { customElement } from 'lit/decorators.js';

import CDSTab from '@carbon/web-components/es/components/tabs/tab.js';

// tried without this also
import '@carbon/web-components/es/components/tabs/index.js';

@customElement('to-tab')
export class ToTab extends CDSTab {
  static styles = [CDSTab.styles, css``];
}

When I try to use this component, it doesn't work as expected:

render() {
    return html`
      <to-tabs value="tab1" @cds-tabs-selected=${this._handleSelectedTab}>
        <to-tab id="test" value="test">Test</to-tab>
        <cds-tab id="tab1" value="tab1"> 1.Tab1 </cds-tab>
        <cds-tab id="tab2" value="tab2"> 2.Tab2 </cds-tab>
        <cds-tab id="tab3" value="tab3"> 3.Tab3 </cds-tab>
        <cds-tab id="tab4" value="tab4"> 4.Tab4 </cds-tab>
      </to-tabs>
    `;
  }

Custom to-tab Issues are that styles are not applied and component event does not working.

Code of Conduct

• I agree to follow this project's Code of Conduct