Strategy...

[bkardell]

So, I've been thinking about this some for a while now and it seems to me that the two fundamental questions here I think are "how do you do this 'resiliently'? and "How much you actually do"?

As I see it, the primary goals of both accordions and tabs are to link a 'title' and 'content' and provide users with a more focused UX experience. The question about resilience asks sort of "what is the closest native, bare-minimum approximation that leaves authors with an acceptable fallback"? At some level, I have been thinking that the closest thing we have here is summary/details as they also do both of these, just with slightly different UX. If you couldn't have the UX experience you wanted, I kind of imagine that this would be the next best thing.

However, the truth is that there are a few problems with this: summary/details has only recently gotten its last implementation and many of us have to support browsers where this doesn't exist still. That's maybe a kind of minor point looking forward, but the bigger issue, I think, is that summary/details are not well-modeled to fit into some kind of slot-projection model where the 'tabs' want to be projected -- because the title is inside. It's also one of those elements that is, despite a lot of work, flawed.

Alternatively, we look at a very least common denominator and just think about text. This is where my head currently is -- we just worry about text pairs of headings and content as fallback. We don't worry about fallback interactions at all that way, or meanings or relationships which can become very tricky for authors. So you wind up with something like

<panel-set>
  <h2 x-title>local</h2>
  <div x-content>
    Yeah idk...local stuff
  </div>
  <h2 x-title>sports</h2>
  <div x-content>
    Yeah idk...sports stuff
  </div>
  <h2 x-title>enterntainment</h2>
  <div x-content>
    Yeah idk...entertainment stuff
  </div>
</panel-set>

And, minimally, you just wire up the semantic actions and meanings and present nothing about look and feel skinning except the semantic part (hiding/showing relevant content) and maybe a default background on the titles or something. If you did no styling at all, it would be 'accordion-like'.

We could then also build inside shadow dom something that was like

   <tabset></tabset>
   <content></content>
   <slot default></slot>

and just use the slot-change event to manage a switch that really only switches projections if you happen to want to see it as 'tabs'... idk, wdyt?

[Nevraeka]

I'm creating a branch to address what I think might be a starting solution to these issues

[bkardell]

ok, you can see this written up a bit on https://panel-set.glitch.me/ and if you reverse that you should be able to get to the actual code too... It is maybe not super clean, but I think it's mostly functional

[Nevraeka]

branch v0.0.2 created to show accordion & tab views. We may need to add an override attribute to force a consistent view. currently the component updates when the viewport is or exceed 720 pixels.

[Nevraeka]

cc @bkardell

[Nevraeka]

merged this so we have a working demo. (sans some minor CSS issues). Use any server to serve the index.html and look at it in the browser.