Multiple files to <playground-ide> displays only 1st tab

[dave52]

Issue

When multiple files are supplied to <playground-ide>, only the first tab can be seen.

Expected result

You can see the second tab in this example.

Details

I'm loading playground via skypack CDN...

<script
  type="module"
  src="https://cdn.skypack.dev/playground-elements"
></script>

It looks like <mwc-tab-bar> wraps each <playground-tab>; I can see 2 tabs in my DOM, with the correct data bound to the elements, it looks like <mwc-tab-bar> isn't setting a display: flex property correctly however, other styles aren't being set too, like underlining selected tab.

You can see the 2nd tab is in the DOM but overlapped by the content below it...

Here inline style for display: flex was manually added to <mwc-tab-bar> for proof of concept; the orange arrow points to where the style has failed to inherit (not sure why)...

In an attempt reverse engineer, I mimicked the demo: https://polymerlabs.github.io/playground-elements/

...and then loaded the same script that was on the demo page (with code below), it fixes the issue but that source probably isn't a reliable URL, imagine the CDN is best.

<script
  type="module"
  src="https://polymerlabs.github.io/playground-elements/playground-configurator.js"
></script>

Let me know if any other info is needed, thank you for your help :)

[aomarks]

Hi @dave52

Is there anything in the console? I have noticed some problems with MWC components loading through skypack/unpkg, so it's possible it's an issue there.

[dave52]

@aomarks console looks clean, nothing suspicious in the network tab too :(

[aomarks]

Confirmed this is an issue with importing @material/mwc-tab-bar from Skypack. Filed material-components/material-web#2359.

Unfortunately importing from unpkg.com is also broken, for a different reason. material-components/material-web#2177 fixed that, but it hasn't been released.

Will look into what we can do.

[dave52]

Oh awesome, thanks for acting so quickly!