tab

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

tablist-label [optional]

Label string to set in [role=tablist]. (set as the aria-label attribute value)

storage-key [optional]

When a tab is selected, its value is saved as the sessionStorage. The selected tab is maintained when you navigate or reload the page. This value should be unique within your site because it is used as the key for sessionStorage. (Setting this attribute is optional, but it is recommended to set it from the viewpoint of usability.)

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 */
  }
}