Hi @winter wraith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Say you have this custom HTML element:
distant mortarBOT
You can style the contents of your custom HTML element <astro-heart> by using the <style> tag directly inside your Astro component. Astro will automatically detect the CSS and handle your styles for you. You don't need to wrap everything inside another <div> to apply styles. Here's an example:
<astro-heart>
<button aria-label="Heart">💜</button> × <span>0</span>
<style>
button {
/* Your styles for the button */
}
span {
/* Your styles for the span */
}
</style>
</astro-heart>
Astro <style> CSS rules are automatically scoped by default. This means that the styles you define inside of an Astro component will only apply to HTML written inside of that same component. So, the styles you define for the button and span in the example above will only apply to the button and span inside your <astro-heart> component.
If you need to style a child component, consider wrapping that component in a <div> (or other element) that you can then style. However, scoped styles won't apply to other Astro components contained inside of your template.