Class isn't passed to Svelte island

[LukaHarambasic]

What version of astro are you using?

1.6.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

The issue #5029 isn't solved as far as I can tell. I also checked if it was included in a release: https://github.com/withastro/astro/releases/tag/%40astrojs%2Fsvelte%401.0.2 & I'm using that version of @astrojs/svelte.

If I add a class to a Svelte island, I would expect it to be added to the parent element in the component, but this doesn't work right now.

Link to Minimal Reproducible Example

LukaHarambasic/harambasic.de@a792bbf

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

The <astro-island> is just used for loading, not for styling. It can't be styled in fact, it's display: contents so it doesn't exist from a styling standpoint.

If you want to add in the passed in class you can do so yourself, by getting the class that comes in as a prop and then passing that into your <button>

[LukaHarambasic]

Thanks! Learned something new regarding display: contents.
Could you give me an example regarding handling the class in svelte? If I wanna access the prop class I get an error that I can't use class, so of course, I could use another term, but that would not be that nice. It also doesn't help as the parent astro page has scoped styles - it should stay like this. Is there something like Vues :deep selector? (https://www.npmjs.com/package/postcss-deep-scopable)

[matthewp]

I'm not an expert on Svelte but I believe this will work:

let className;
export { className as class };

[matthewp]

Ah, here's a good blogpost on the topic by our very own @tony-sull https://navillus.dev/blog/svelte-class-props

[LukaHarambasic]

Awesome, thank you!