paragraph class and slots

[polar lava]

I'm passing body text from an .MD file to a slot. Is there a way I can add a class to the resulting paragraph tags

[vast lagoon]

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

---

In Astro, HTML attributes like class do not automatically pass through to child components. Instead, you can accept a class prop in the child component and apply it to the root element. When destructuring, you must rename it, because class is a reserved word in JavaScript. Here's an example:

---const { class: className, ...rest } = Astro.props;---<div class={className} {...rest}>  <slot/></div>

In the parent component, you can then pass the class like this:

---import MyComponent from "../components/MyComponent.astro"---<style>  .red {    color: red;  }</style><MyComponent class="red">This will be red!</MyComponent>

However, this will apply the class to the root element of the component, not to individual paragraph tags within the slot. If you want to style individual paragraph tags, you might need to do that within the component that defines the slot, or consider using CSS selectors that target paragraph tags within a specific class.

For more information, you can refer to the Astro documentation on passing a class to a child component (https://docs.astro.build/en/guides/styling/#passing-a-class-to-a-child-component).

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