CODEWITHSUNDEEP
sveltesvelte-3
Duane J
Duane J

Reputation: 1833

Programmatically access a svelte-generated CSS class name?

I'm working with an external library (@shopify/draggable) and would like to tell Draggable what the name of the draggable CSS class is in the current component.

onMount(() => {
    const droppable = new Droppable(containers, {
      draggable: ".draggable",
      dropzone: ".dropzone",
    });
});

Elsewhere, I've defined a .draggable style:

<style>
    .draggable { ... }
</style>

I know I can use the :global(.draggable) CSS selector to tell Svelte that the CSS class name is global, but is there a way to do the reverse, and ask Svelte what it would rename the local draggable CSS class to once global? e.g. svelte-a57ab?

Upvotes: 1

Views: 2269

Answers (1)

Geoff Rich
Geoff Rich

Reputation: 5492

Svelte won't rename the draggable class -- it will still be present in your markup. It will only add an additional svelte-xxxxx class to scope the styles, so you may be able to continue using the .draggable selector.

However, if you do need access to the Svelte CSS class, you implement it yourself. There is no build-in Svelte API to do this, but you can retrieve it by checking the element's class list. You need to first get a reference to the draggable DOM node using bind:this and then retrieve the CSS class from its classList in the onMount function. Here's an example of retrieving the CSS class from a heading.

<script>
    import { onMount } from 'svelte';
    let heading;
    let svelteClass = '';
    
    onMount(() => {
        svelteClass = Array.from(heading.classList).filter(c => c.includes('svelte-'))[0];
    })
</script>

<style>
    h1 {
        color: red;
    }
</style>

<h1 bind:this={heading}>Hello world!</h1>
<div>
    {svelteClass}
</div>

Note that there will only be a svelte-xxxxx class if you have applied styles to the node.

Upvotes: 5

Related Questions