Tabs UI component

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/tab": "...",
      "@w0s/shadow-append-css": "..."
    }
  }
</script>
<script type="module">
  import Tab from '@w0s/tab';

  customElements.define('x-tab', Tab);
</script>

<x-tab
  tablist-label="Tab label"
  storage-key="tab1"
>
  <a href="#tabpanel1" slot="tab">Tab 1</a>
  <a href="#tabpanel2" slot="tab">Tab 2</a>
  <div slot="tabpanel" id="tabpanel1">Contents of tabpanel 1</div>
  <div slot="tabpanel" id="tabpanel2">Contents of tabpanel 2</div>
</x-tab>

* uuid is no longer required since version 3.1

Attributes

Style customization

Shadow DOM

The tab markup looks like this.

<x-tab class="my-tab">
  #shadow-root (open)
  <div part="tablist" role="tablist">
    <slot name="tab"></slot>
  </div>
  <div part="tabpanels">
    <slot name="tabpanel"></slot>
  </div>
</x-tab>

Therefore, you can customize the style using ::part CSS pseudo-element.

.my-tab {
  &::part(tab) {
    ...
  }

  &::part(tabpanels) {
    ...
  }
}

slot="tab", slot="tabpanel"

Elements using the slot attribute will have the following attributes added by applying the custom element.

<x-tab class="my-tab">
  <a href="#tabpanel1" slot="tab">Tab 1</a>
  <a href="#tabpanel2" slot="tab">Tab 2</a>

  <div slot="tabpanel" id="tabpanel1">Contents of tabpanel 1</div>
  <div slot="tabpanel" id="tabpanel2">Contents of tabpanel 2</div>
</x-tab>

↓

<x-tab class="my-tab">
  <a slot="tab" id="..." role="tab" aria-controls="tabpanel1" tabindex="0" aria-selected="true">Tab 1</a>
  <a slot="tab" id="..." role="tab" aria-controls="tabpanel2" tabindex="-1" aria-selected="false">Tab 2</a>

  <div slot="tabpanel" id="tabpanel1" role="tabpanel" aria-labelledby="...">Contents of tabpanel 1</div>
  <div slot="tabpanel" id="tabpanel2" role="tabpanel" aria-labelledby="..." class="is-hidden">Contents of tabpanel 2</div>
</x-tab>

Therefore, you can customize the style using role attribute.

.my-tab {
  & > [role='tab'] {
    ...
    /* This style does not applicable in environments where JavaScript is disabled */
  }

  & > [role='tabpanel'] {
    ...
    /* This style does not applicable in environments where JavaScript is disabled */
  }
}