discussing the the markup of a panel (prollyfill with no shadow dom)

pset.html

<common-panel-set role="tablist">
  
    <!-- in a panelset we also generate this 'proxy container' which contains a copy of the panel headers.
         we can then just use a simple CSS rule to hide either the inline headers (used for cases like accordions)
         or the proxy headers (used for cases like tabs).  This allows us to achieve many possible layouts.
         After the proxy headers are just individual panels. The only difference from 
         regular panels is that the 'header' roles become tab and aria-selected is managed, and the content
         becomes the tabpanel role.
         -->
    <div class="common-panel-tabs" role="presentation">
      <div class="common-panel-header-box" role="presentation" id="-cp-39">
        <div class="common-panel-header" tabindex="0" role="tab" aria-controls="-cp-37" aria-selected="true">
          <i class="common-panel-icon"></i><span class="common-panel-title" ng-bind-html="title">Local</span>
          <button class="common-panel-remove" title="Remove this panel" style="display: none;">x</button>
        </div>
      </div>
      <div class="common-panel-header-box" role="presentation" id="-cp-44">
        <div class="common-panel-header" tabindex="-1" role="tab" aria-controls="-cp-42">
          <i class="common-panel-icon"></i>
          <span class="common-panel-title" ng-bind-html="title">Entertainment</span>
          <button class="common-panel-remove" title="Remove this panel" style="display: none;">x</button>
        </div>
      </div>
      <div class="common-panel-header-box" role="presentation" id="-cp-48">
        <div class="common-panel-header" tabindex="-1" role="tab" aria-controls="-cp-46">
        <i class="common-panel-icon"></i>
        <span class="common-panel-title" ng-bind-html="title">Sports</span>
        <button class="common-panel-remove" title="Remove this panel" style="display: none;">x</button>
        </div>
      </div>
    </div>
    
    <common-panel id="-cp-36" role="presentation" expansion-state="opened">
        <div class="common-panel-header-box" role="presentation" id="-cp-8">
          <div class="common-panel-header" role="presentation">
            <button aria-controls="-cp-41"
             aria-selected="true"
              role="tab"
              class="common-panel-title-wrapper"
              id="panel-title">
              <i class="common-panel-icon"></i>
              <span class="common-panel-title">Local</span>
              <!-- announce us as a panel -->
              <span class="visually-hidden">&nbsp;panel&nbsp;</span>
            </button>
            <!-- we really don't want this to be read if it is display: none -->
            <button class="common-panel-remove" aria-label="Remove this panel" style="display:none"></button>
          </div>
        </div>
        <div class="common-panel-content" tabindex="-1" id="-cp-42" role="tabpanel" aria-hidden="true">
         <span class="visually-hidden">&nbsp;panel content&nbsp;</span>
         <p class="ng-scope">This would contain content about local news stories.</p>
        </div>
      </div></common-panel>

      <common-panel id="-cp-41" role="presentation" expansion-state="closed">
        <div class="common-panel-header-box" role="presentation" id="-cp-81">
          <div class="common-panel-header" role="presentation">
            <button aria-controls="-cp-41"
              aria-selected="false"
              role="tab"
              class="common-panel-title-wrapper"
              id="panel-title">
              <i class="common-panel-icon"></i>
              <span class="common-panel-title">Entertainment</span>
              <!-- announce us as a panel -->
              <span class="visually-hidden">&nbsp;panel&nbsp;</span>
            </button>
            <!-- we really don't want this to be read if it is display: none -->
            <button class="common-panel-remove" aria-label="Remove this panel" style="display:none"></button>
          </div>
        </div>
        <div class="common-panel-content" tabindex="-1" id="-cp-81" role="tabpanel" aria-hidden="true">
         <span class="visually-hidden">&nbsp;panel content&nbsp;</span>
         <p class="ng-scope">This would contain content about entertainment news stories.</p>
        </div>
      </common-panel>

      <common-panel id="-cp-45" role="presentation" expansion-state="closed">
        <div class="common-panel-header-box" role="presentation" id="-cp-82">
          <div class="common-panel-header" role="presentation">
            <button aria-controls="-cp-82"
              role="tab"
              aria-selected="false"
              class="common-panel-title-wrapper"
              id="panel-title">
              <i class="common-panel-icon"></i>
              <span class="common-panel-title">Sports</span>
              <!-- announce us as a panel -->
              <span class="visually-hidden">&nbsp;panel&nbsp;</span>
            </button>
            <!-- we really don't want this to be read if it is display: none -->
            <button class="common-panel-remove" aria-label="Remove this panel" style="display:none"></button>
          </div>
        </div>
        <div class="common-panel-content" tabindex="-1" id="-cp-82" role="tabpanel" aria-hidden="true">
         <span class="visually-hidden">&nbsp;panel content&nbsp;</span>
         <p class="ng-scope">This would contain content about sports news stories.</p>
        </div>
      </common-panel>
    </common-panel-set>