hy-tabs-item.tsx

import {Component, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-tabs-item',
  styleUrl: 'hy-tabs-item.scss',
  shadow: false,
})
export class HyTabsItem {
  @Prop() tabTitle?: string;

  render() {
    const id = this.tabTitle.toLowerCase().replace(/\W/g, '-');

    return (
      <div tabindex="0" role="tabpanel" id={`${id}-tab`} aria-labelledby={id} hidden>
        <slot></slot>
      </div>
    );
  }
}