Provide classname utility for style encapsulation between parent/child component

[zheeeng]

Describe the problem

Sometimes style switching logic is placed in the parent component and controlled by switching the classNames. To avoid using the global CSS className, we need a utility to create a unique className and mark it as used.

Describe the proposed solution

There is a proposal API:

// Parent.svelte
<script>
import Child from './Child.svelte'
import { classname } from 'svelte/classname'

const luckyClassName = classname('lucky')
const unluckyClassName = classname('unlucky')

let isLucky = false

</script>

<Child class={isLucky ? luckyClassName : unluckyClassName} on:click={() => isLucky = !isLucky} />

<style>
// mark as used
.lucky {
  color: red;
}

// mark as used
.unlucky {
  color: blue;
}
</style>

Alternatives considered

No

Importance

would make my life easier

[ramiroaisen]

This would really make a big difference for me, having the ability to pass unique classNames from parent to child components would be a big win

[david11o]

I have the same issue which you can checkout at #16802 . Here are the current workarounds that I have found. However I would still like a way to override class-styling for a parent/child component.

Workaround

The current workarounds are:

• Duplicate html and styling (and script, not included in this example) in the component.
• Utilise a combination of ":global()" and "!important" in the styling tag to disable the component scope and overwrite the parent's styling.
• Utilise inline styling instead of classes, they seem to work and can overwrite the parent. See the border-styling in the code. ( Component composition with tree-scoped style propagation #16802 )