Easy workaround to put component classes to childs (without global)

[dm-de]

Describe the problem

Sometimes, we need to use :global() styles
to modify child components
Otherwise, it would not work.

<div>
    <Icon class="extra" />
</div>

<style>
:global(.extra) {
    color: red;
}
</style>

Describe the proposed solution

MAGIC value $HASH
$HASH is replaced with the value (for example: svelte-urs9w7) of component hash

The code could look so:

<div>
    <Icon class="{$HASH} extra" />
</div>

<style>
.extra {
    color: red;
}
</style>

finally - Icon class turn to:
class="svelte-urs9w7 extra"

Alternatives considered

Alternative: do it automatic

Add $HASH to any child component, that use class, defined in style-block

Importance

i cannot use svelte without it

[ToP29]

This would be really great addition! One last thing missing from perfect framework/compiler 😁
As long term svelte user/addict, I delt with this issue many times. Simple workaround is to created parent div for this component and style that, but it does not work in all cases and i kinda hate growing html tree. So I also usually pick making the class global, which in my opinion is unnecessary chore and could be improved.

[christophsanz]

In my opinion this should be in 5.0, not 5.x - and automatic.

Alternative: do it automatic
Add $HASH to any child component, that use class, defined in style-block

I'd say this also makes the components more aligned with normal html tags in svelte, which is always good imo.

5.0 is the chance to add this breaking change and do it automatically, please consider it moving it back to 5.0, thx :)

[mattpilott]

I certainly run into needing/wanting this on a regular basis. Here's a repl of the issue as it stands:
https://svelte.dev/playground/0d2e114c5a6d4394944102b319e5005c?version=5.38.1

And here is an example showing a workaround that introduces a wrapping div:
https://svelte.dev/playground/a5770468f4104bb681aaec088f023ad3?version=5.38.1

The workaround is of course not desirable, would be useful to consider a built in solution to better support headless ui libraries and component reuse across projects.

[dm-de]

Idea behind this was different...

As you can see, I use child component <Icon>
But <Icon> has no class "extra" in it.

But my parent want to modify <Icon>, by adding extra class.
Solution now is to use global - but this will pollute global classes.
A workaround is a strange named class - but svelte already use "hash" for this.