Package Exports

@w0s/tab
@w0s/tab/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@w0s/tab) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tabs UI component

Browser support

Using the ShadowRoot: adoptedStyleSheets. (Can I use...)

Firefox 101+
Safari 16.4+
Chrome 73+
Edge 79+

Demo

Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/tab": "..."
    }
  }
</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>

* @w0s/shadow-append-css is no longer required since version 5.0

* uuid is no longer required since version 3.1

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

@w0s/tab