SvelteKit给组件绑定class报错：类仅可应用于DOM元素而非组件

Svelte 框架语法限制：class:xxx 条件类指令仅支持作用于原生DOM元素，无法直接绑定在自定义组件（包括第三方库提供的组件）上，直接在fluent-svelte的IconButton组件上使用class:active绑定就会抛出该错误。

方案1：通过组件class属性传拼接后的类名（推荐） #

fluent-svelte 全组件默认支持class属性透传，会自动把传入的类名合并到组件内部的根DOM元素上，只需要把条件判断的结果转为类名字符串，通过常规class属性传入即可，不需要用class:active指令：

<IconButton
  sveltekit:prefetch
  class={url !== "/" 
    ? (currentPage.match(url) ? "active" : "") 
    : (url === currentPage ? "active" : "")}
  href={url}
>
  <TextBlock variant="bodyStrong">
    {name}
  </TextBlock>
</IconButton>

如果觉得内联三元表达式可读性差，可以把激活状态的判断逻辑提前抽到脚本块里，用响应式变量计算结果：

<script>
  // 此处省略currentPage、url、name等变量的定义/引入逻辑
  $: isActive = url !== "/" ? currentPage.match(url) : url === currentPage
</script>

<IconButton
  sveltekit:prefetch
  class={isActive ? "active" : ""}
  href={url}
>
  <TextBlock variant="bodyStrong">
    {name}
  </TextBlock>
</IconButton>

方案2：外层包裹原生DOM元素绑定类 #

如果遇到不支持class透传的特殊组件，可以在组件外层套一层原生HTML标签，把class:active指令绑定在外层标签上，再通过:global()选择器写激活态样式：

<div
  class="nav-btn-wrap"
  class:active={url !== "/" ? currentPage.match(url) : url === currentPage}
>
  <IconButton
    sveltekit:prefetch
    href={url}
  >
    <TextBlock variant="bodyStrong">
      {name}
    </TextBlock>
  </IconButton>
</div>

<style>
  .nav-btn-wrap.active :global(button) {
    /* 在这里写导航按钮激活后的样式 */
    background: var(--color-accent);
  }
</style>

• 所有Svelte的class:条件类指令、use:动作指令等DOM专属指令，都只能直接加在原生HTML标签上，不能直接加在组件标签上
• 给第三方组件传自定义类前，可以先翻阅对应组件文档，确认组件支持class属性透传到根元素，避免类名传入后不生效

内容的提问来源于stack exchange，提问作者AnmolPlayzz