auro-accordion: z-index cannot transcend the shadow-root

[gusnaughton]

Describe the bug

When putting our planbook component in the auro-accordion content slot, the z-index is not respected and the content which should pop out instead scrolls the entire slot down.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Expected: This was generated with:

      <auro-accordion noProfile="true" chromeless="true" justifyLeft>
        <span class="accordion-text" slot="trigger">Change your search</span>

      </auro-accordion>
      <div class="planbook">
        <Planbook on:planbookSubmit={(evt) => handleMessage(evt)}></Planbook>
      </div>

Actual:

This was generated with:

      <auro-accordion noProfile="true" chromeless="true" justifyLeft>
        <span class="accordion-text" slot="trigger">Change your search</span>
      <div class="planbook">
        <Planbook on:planbookSubmit={(evt) => handleMessage(evt)}></Planbook>
      </div>
      </auro-accordion>

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[blackfalcon]

Can you include a test URL and a video of the issue? These issues are really difficult to troubleshoot via a screenshot.

[gusnaughton]

Test URL: www.alaskaair.com/search/hnl/bos/29nov

Video:

https://user-images.githubusercontent.com/7005799/141532539-403974d4-1213-499f-bae5-51862c2091f0.mov

[blackfalcon]

Is this not the same issue that was addressed with this update? https://github.com/AlaskaAirlines/auro-accordion/pull/33/files#diff-b18ccd15ec95e2a9c4fead5bca9085042af688361a24d3463c27138e3c797a5bR32

[aesthetiques]

Hey Dale, I found that unless the overflow is set to visible, it doesn't actually resolve the issue. Additionally, there are some compatibility issues with svelte and custom element properties that aren't reflected, we should probably make sure to reflect properties on our components., so that we don't have to take extra steps as a consumer. (Geoff wrote a nice article on this https://css-tricks.com/using-custom-elements-in-svelte/) Should I go ahead and draft a PR?