Do slots need certain elements?

[streamworksaudio]

I have started to implement this player as part of our whole Mux solution. So far it is going well.

I do have a question about the slots. I am trying to put some text into the top-chrome slot using

<div slot="top-chrome">
    <div>My Text</div>
</div>

However if I do that the rendered div has 0 height and the text floats along the top edge of the media-controller. If I use an h1, h2, h3 etc instead of a div, like:

<div slot="top-chrome">
    <h2>My Text</h2>
</div>

The rendered h2 element has the correct height and is placed just inside and along the top of the media-controller as expected.

Is there a reason why certain elements such as div or p have this behaviour? Is it expected?

Cheers

[streamworksaudio]

A little more digging and I see that the style :host sets the line height to 0, this seems to be causing the issue. So maybe it was by design and that we need to style our elements that are placed in the slots?

Cheers

[luwes]

thanks for reporting, that might be a styling bug on our end. we'll have a look at this soon!

[dylanjha]

@streamworksaudio thanks for opening this!

I have a small example here using top-chrome, which seems to be working as expected: https://codesandbox.io/s/media-chrome-slots-wid6nd

The top-chrome slot is pretty un-opinionated as far as applying any default styles, so if you're using a <div> you'll definitely have to give it some of your own styles (which gives you a lot of flexibility).

Depending on what you're after, you might find it handy to use <media-control-bar slot="top-chrome">, the control bar has some default styles applied.

Here's some more docs about using slots, which are admittedly pretty hard to find right now, so I'm guessing you didn't see this: https://github.com/muxinc/media-chrome/blob/main/docs/media-controller.md#layout---slots

Let me know if that helps!

[streamworksaudio]

@dylanjha thanks for replying.

I did end up putting my own style to the div that was in the top-chrome slot and it looks the way I wanted it to. Just needed to add a line height to it as the default has no line height.

In your example, you are using a h1 tag in the top-chrome div which has a top and bottom margin, but even then the line height is still 0 so there is no height to the div (the margin on the h1 makes it line up a little better).

Perhaps this is a design choice, then no worries as we can always style it the way we want.

Cheers

[dylanjha]

Ahh, I see what you're saying. I don't think that was an intentional design choice -- that does feel like a bug. Maybe slots just need a line-height: 1 by default.

Screen.Recording.2022-07-29.at.8.11.43.AM.mov

[streamworksaudio]

Yeah that does seem like the fix. It is easy for us to customize it with our own CSS, but it might catch some people off guard.

[gkatsev]

I think it's something that we can fix, but it's an unfortunate side-effect of light dom and shadow dom interactions and expectations similar to #262 but in reverse.
We set line-height on media-container

media-chrome/src/js/media-container.js

Line 29 in b3141d6

line-height: 0;

and line-height is an inherited property. We can probably reset it back for child elements, but we'd want to see if any of the media-chrome elements expect line-height 0.

[cjpillsbury]

Going to mark this as answered, but happy to amend if we'd still like this open (same to you, @streamworksaudio)