Open dave52 opened 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.
@aomarks console looks clean, nothing suspicious in the network tab too :(
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.
Oh awesome, thanks for acting so quickly!
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...
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 adisplay: 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.
Let me know if any other info is needed, thank you for your help :)