google / google/playground-elements

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

Open
#141 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
648
Forks
61
PR merge metrics
No merged PRs in 30d

Description

## Issue
When multiple files are supplied to ``, only the first tab can be seen.
![image](https://user-images.githubusercontent.com/6565619/116474299-ef86ea80-a83d-11eb-8457-f90b75b0e22b.png)

## Expected result
![image](https://user-images.githubusercontent.com/6565619/116474449-23621000-a83e-11eb-8705-4d747a7ef33a.png)
You can see the second tab in this example.

## Details
I'm loading playground via skypack CDN...
```

```
It looks like `` wraps each ``; I can see 2 tabs in my DOM, with the correct data bound to the elements, it looks like `` 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](https://user-images.githubusercontent.com/6565619/116476188-7c32a800-a840-11eb-9908-e2dd07936f85.png)

Here inline style for `display: flex` was manually added to `` for proof of concept; the orange arrow points to where the style has failed to inherit (not sure why)...
![image](https://user-images.githubusercontent.com/6565619/116476396-c9af1500-a840-11eb-8ce4-a40ccdb42fd5.png)

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 :)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.