Tab/Spicy Sections

[bahrus]

Code sample

<spicy-sections id="demos">
  <h2>Tabs</h2>
  <div>
    <p>
      The <code>tab-bar</code> affordance
      can use shadow-dom to establish
      a styleable tab-bar and panels.
      The required parts can be exposed for styling
      with consistent pseudo-elements.
    </p>
    <p>
      In a tab state, we likely want to style:
    </p>
    <ul>
      <li>The outer box</li>
      <li>The tab bar</li>
      <li>The tabs themselves</li>
      <li>The selected tab</li>
      <li>The tab panel area</li>
    </ul>
  </div>
  <h2>Collapse</h2>
  <div>
    <p>
      The accordion-like <code>collapse</code> affordance
      also uses shadow-dom to establish
      summary-details like behavior for each section,
      with an option to make the toggle-states
      <code>exclusive-collapse</code>.
    </p>
    <p>
      In an accordion state, we likely want to style:
    </p>
    <ul>
      <li>The outer box</li>
      <li>The section headings/buttons</li>
      <li>The open/closed marker</li>
      <li>Open and closed heading styles</li>
      <li>Open and closed content styles</li>
    </ul>
  </div>
  <h2>Structured Content</h2>
  <div>
    <p>
      The fallback state is simply structured HTML,
      without any show/hide affordances.
      This does not require any special styling.
    </p>
  </div>
</spicy-sections>

MDN URL:

No response

Specification URL:

https://css-tricks.com/newsletter/281-tabs-and-spicy-drama/#:~:text=Except%20so%20far%20they%E2%80%99ve%20come%20to%20the%20conclusion,component%20based%20on%20the%20width%20of%20the%20browser.

Any other links?

https://daverupert.com/2021/10/native-html-tabs/

How stable is this feature?

Future (No implementations yet)

Type of feature

HTML element

What focus area does this feature fall under?

No response

Details

No response