Access to component class name

[Vulcagon]

Describe the problem

During compilation a Svelte component gets a unique class name to encapsulate styles. But unfortunately there isn't a way to access this component class name in any way.

Describe the proposed solution

It would be great to have a variable or rune (e.g. $class) which gets substituted by the component's unique class name during compilation. This would allow for a lot of stuff.

It would solve the problem of not being able to pass down scoped classes to child components in a parent component as you now could simply pass down the unique class name to the child component as well.

The current way of styling child components from a parent component looks something like the following:

<script>
    import ChildComponent from './ChildComponent.svlete';
</script>

<div class="parent-component">...</div>
<ChildComponent class="child-component">...</ChildComponent>

<style>
    .parent-component {
        ...
    }

    :global(.child-component) {
        ...
    }
</style>

This translates to the following during compilation. Every element of the parent component gets the unique class name of the parent component while every element of the child component only gets the unique class name of the child component and not the class name of the parent component:

<div class="component-id-1 parent-component">...</div>
<element class="component-id-2 child-component">...</element>

.component-id-1.parent-component {
    ...
}

.child-component {
    ...
}

Being able to get the unique class name of a component would make it possible to just pass down this unique class name to the child component:

<script>
    import ChildComponent from './ChildComponent.svlete';
</script>

<div class="parent-component">...</div>
<ChildComponent class="{$class} child-component">...</ChildComponent>

<style>
    .parent-component {
        ...
    }

    /*
        No need to use `:global` anymore
        since the child component now also
        has the unique class name of the
        parent (this component)
    */
    .child-component {
        ...
    }
</style>

Substituting $class with the unique class name of the component during compilation would give the following:

<div class="component-id-1 parent-component">...</div>
<element class="component-id-2 component-id-1 child-component">...</element>

.component-id-1.parent-component {
    ...
}

.component-id-1.child-component {
    ...
}

Not being able to properly style your child components from a parent component is a pretty important feature in my opinion when styling everything yourself without using CSS frameworks like tailwindcss. Not being able to do this in Svelte makes me seriously consider switching from Svelte to Vue, even though there are a lot of things in Svelte that I would miss in Vue.

But there are other issues addressing the same issue and providing a different fix like Issue #6972 which suggests forwarding the class property by using forward:class. But even if this proposal would make it into Svelte being able to access the class name of a component would still be a nice feature, even though the importance would decrease significantly in my opinion to a feature that would then only be "nice to have".

Being able to access the unique component class would also allow to add html elements programmatically while still giving them the unique component class making them get affected by the scoped styles of the component.

<script>
    let newElement = document.createElement('div');
    newElement.className = $class;
    componentHTMLElement.appendChild(newElement);
</script>

<!-- html -->

<style>
    /*
        `newElement` gets affected by these styles
        since it also has the component class as
        class name
    */
    div {
        ...
    }
</style>

Importance

I cannot use Svelte without it

[7nik]

No need to open a new issue, there is already #7776 and #8538 and a whole bunch of similar ones.