Svelte 以编程方式访问生成的CSS类名？

我正在使用一个外部库（@shopify/draggable），我想告诉draggable当前组件中draggable CSS类的名称

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

在其他地方，我定义了

.draggable

样式：

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

.draggable{…}

---

我知道我可以使用

：global（.draggable）

CSS选择器告诉Svelte CSS类名是全局的，但有没有办法做到相反，并询问Svelte如何将本地

draggable

CSS类重命名为once global？e、 g.

svelte-a57ab

？

svelte不会重命名可拖动类——它仍将出现在标记中。它只会添加一个附加的

svelte-xxxxx

类来确定样式的范围，因此您可以继续使用

.draggable

选择器

但是，如果您确实需要访问Svelte CSS类，您可以自己实现它。没有内置的SvelteAPI来实现这一点，但是您可以通过检查元素的类列表来检索它。您需要首先使用

bind:this

获取对可拖动DOM节点的引用，然后在

onMount

函数中从其

classList

中检索CSS类。下面是一个从标题检索CSS类的示例

<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>

从“svelte”导入{onMount}；
让标题；
让svelteClass=''；
onMount（（）=>{
svelteClass=Array.from（heading.classList）.filter（c=>c.includes（'svelte-'））[0]；
})
h1{
颜色：红色；
}
你好，世界！
{svelteClass}

请注意，如果已将样式应用于节点，则仅会有一个

svelte-xxxxx

类