What is up with not being able to cleanly remove some components

[babakfp]

Check this out: https://github.com/withastro/starlight/blob/main/packages/starlight/components/Sidebar.astro

<div class="md:sl-hidden">
	<MobileMenuFooter />
</div>

If I was to override MobileMenuFooter, the element that wraps it would remain and in order to override it I would need to override Sidebar component, and as explained in #4123, it's not possible to override some components, and Sidebar is one of them because I wouldn't have access to components inside of it when overriding it.

Elements like that that remain, could cause issues. For example, I think it's grid or something like that even when display none is used, it still acts like it's there. not sure. it's annoying too. I just want to keep things clean and less hacky css.

Same with:

<header class="header"><slot name="header" /></header>

... in PageFrame.

and more...

[delucis]

It’s a tricky balance. The reason in this case is so that users can easily override the footer without also needing to learn how to show/hide the footer. If the <div class="md:sl-hidden"> were inside the footer component, then an override like the following would not behave as users expect:

---
import Default from '@astrojs/starlight/components/MobileMenuFooter.astro';
---

<Default />
<div>
  Some extra stuff for the mobile footer.
</div>

The extra <div> would appear on desktop devices as well because the CSS controlling visibility would be inside the <Default> component.

Apologies if the leftover empty div feels a bit clunky but it was a judgment call over whether an empty div or an actually broken behaviour was preferable.

[babakfp]

aha, i see...

thank you for the explanation.

i get it, good to know...

what do you think about using slots instead? would that work? example MobileMenuFooter.astro:

<div class="md:sl-hidden">
  <slot name="start" />
  ... current MobileMenuFooter code goes here
  <slot name="end" />
</div>

and an override for the adding stuff in footer would be like:

<Default>
  <div slot="end">
    Some extra stuff for the mobile footer.
  </div>
</Default>

(i don't know much about astro syntax so it may be wrong a bit).

pros would be that the empty div wouldn't not exist and possible css issues. cons may be that using these slots could be seen as bloating the code or have some issues that I don't know of...

could this work without issues?

[delucis]

Ah yeah, start and end slots are something we also considered when implementing component overrides! In the end it felt like it might be an extra complexity to document and it’s not always obvious where the “start” and “end” are. Like in this example I guess the idea would be that they would be just inside the <div class="md:sl-hidden">, but deciding and documenting this for each component vs using the current design felt like it could be more confusing (and would people then say “oh also give me a slot for this position and that position”).

So yeah, could work technically for sure, but I don’t know if it’s definitely “better”. Thanks for the feedback!