search

google / playground-elements

Serverless coding environments for the web.
BSD 3-Clause "New" or "Revised" License
548 stars 54 forks source link

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

Open dave52 opened 3 years ago

dave52 commented 3 years ago

Issue

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

Expected result

image 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... image

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)... image

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 commented 3 years ago

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 commented 3 years ago

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

aomarks commented 3 years ago

Confirmed this is an issue with importing @material/mwc-tab-bar from Skypack. Filed https://github.com/material-components/material-components-web-components/issues/2359.

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

Will look into what we can do.

dave52 commented 3 years ago

Oh awesome, thanks for acting so quickly!