Panelset Element Demonstration

Tabset

The tabset affordance can use shadow-dom to establish a styleable tabset and panels. The required parts can be exposed for styling with consistent pseudo-elements.

In a tab state, we likely want to style:

• The outer box
• The tab bar
• The tabs themselves
• The selected tab
• The tab panel area

Disclosure

The accordion-like disclosure affordance also uses shadow-dom to establish summary-details like behavior for each section, with an option to make the toggle-states exclusive-disclosure.

In an disclosure state, we likely want to style:

• The outer box
• The section headings/buttons
• The open/closed marker
• Open and closed heading styles
• Open and closed content styles

Content

The fallback state is simply structured HTML, without any show/hide affordances. This does not require any special styling.