以编程方式访问一个苗条生成的 CSS 类名？答案

【问题标题】：Programmatically access a svelte-generated CSS class name?以编程方式访问一个苗条生成的 CSS 类名？
【发布时间】：2021-04-08 11:16:36
【问题描述】：

我正在使用外部库 (@shopify/draggable)，并想告诉 Draggable 当前组件中可拖动 CSS 类的名称。

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

在其他地方，我定义了 .draggable 样式：

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

我知道我可以使用 :global(.draggable) CSS 选择器告诉 Svelte CSS 类名称是全局的，但是有没有办法反过来，并询问 Svelte 它将如何将本地 draggable CSS 类重命名为曾经全球？例如svelte-a57ab?

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

Svelte 不会重命名可拖动类——它仍然会出现在您的标记中。它只会添加一个额外的svelte-xxxxx 类来限定样式，因此您可以继续使用.draggable 选择器。

但是，如果您确实需要访问 Svelte CSS 类，您可以自己实现它。没有内置的 Svelte API 可以执行此操作，但您可以通过检查元素的类列表来检索它。您需要首先使用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-xxxxx 类。

【讨论】：