Vue-like component class bindings

[Freeplayg]

Describe the problem

Currently, if I want to give a svelte component a CSS class, i need to export a "className" prop so that I can reference it in the parent component. This doesn't work with scoped component styles, and I need to rely on :global() which does not seem like a good practice as it can affect other components. And I also want to avoid creating unnecessary wrapper elements for performance and CSS reasons.

Describe the proposed solution

Vue lets you bind the class property to an element in the component, so you can then use it in the parent component like a regular element. This would avoid needing to export the prop as "className", and would work with CSS scoping without needing to rely on :global().

https://vuejs.org/guide/essentials/class-and-style#with-components

Importance

nice to have

[dummdidumm]

The Vue implementation bails out as soon as your component has more than one root element - that's a no-go for us, as it's going to cause confusion. There are many related proposals how to tackle this, so closing this in favor of those. We'll have something for this at some point.