Hi @warm fractal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#can i scope a <style> if i'm using is:inline
toxic bladeBOT
The is:inline directive in Astro tells Astro to leave the <style> tag as-is in the final output HTML. This means the contents will not be processed, optimized, or bundled, and the styles will be global and not scoped to the component. This is likely why your styles are applying to the parent <Page/> element ^1^.
If you want to scope your styles to a specific component, you should not use is:inline. Instead, you can use the is:global directive to opt-out of automatic CSS scoping for specific styles that you want to apply globally ^4^. You can also mix global and scoped CSS rules together in the same <style> tag using the :global() selector ^2^.
However, if you want to apply styles to the contents of a <slot/>, there are some limitations. According to a Github issue, if a component includes a <slot/> tag, then the style tag in the component will be ignored if plain text or another Astro component is passed into the slot ^6^. This might be why your styles were not applying to the <slot/> in the first place.
As a workaround, you could manually add classes to the elements within the slot and define these classes in your global styles. Another option is to use the experimental CSS inlining feature in Astro 2.4, which allows you to configure stylesheets to be inlined into a <style> tag ^5^.