Component slot not being styled

[desert patio]

I have a component which has local styling. This component has a <slot/> within it, which may be replaced by an element with a class. However, if i reference this class within the local style of the component, the css isn't applied. Is there any way to fix this?

[wicked gazelle]

Hi @desert patio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, you can use the :global() selector in your component's local style to apply CSS styles to the child elements that are passed through the <slot/>. This allows you to style elements with a specific class within the slotted content.

Here's an example from the Astro documentation (https://docs.astro.build/en/guides/styling#global-styles):

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
</style>
<h1>Title</h1>
<article><slot /></article>

In this example, the :global(h1) selector is used to apply styles to child h1 elements within the <slot/>. You can adapt this pattern to style the class you're targeting within the slotted content.

Remember to use scoped styles as often as possible and global styles only as needed.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: