<polymer-ui-accordion> doesn't always work with Shadow DOM polyfill

[esprehn]

I have a template repeat over inside an accordion and I attempt to select the last one. The last one does get the active attribute, but it doesn't actually expand.

<polymer-ui-accordion multi selected="{{ [ messages.length - 1 ] }}">
    <template repeat="{{ message, i in messages }}">
        <polymer-ui-collapsible class="message {{ {approval: message.approval, disapproval: message.disapproval} | tokenList }}">

which produces this on the last row:

<polymer-ui-collapsible class="message polymer-selected" active="">
    <div on-tap="{{ headerTap }}">
      <div class="message-header polymer-ui-collapsible-header" on-tap="{{ scrollMessageToVisibleIfNeeded }}">
                     ...
    </div>
    <div id="collapsibleBody" on-tap="{{ bodyTap }}" class="polymer-collapse-closed" style="overflow: hidden;">
  ...

so it seems the <polymer-ui-collapsible> is confused as it has the active attribute set, the polymer-selected class added, but the body has polymer-collapse-closed and overflow: hidden.

If you click the header to collapse it and then expand it again the widget starts working.

[frankiefu]

In looking for the root cause, found 2 issues in ShadowDOM polyfill:
https://github.com/Polymer/ShadowDOM/issues/399
https://github.com/Polymer/ShadowDOM/issues/400

[tjsavage]

Since polymer-ui-accordion is deprecated now, closing this here. Feel free to reopen