Svelte Shadcn Select组件hover时未添加data-highlighted属性问题

针对你遇到的Select.Item悬停时不自动添加data-highlighted属性导致高亮失效的问题，给你几个排查和解决方向：

• 检查依赖版本兼容性
  svelte-shadcn的Select组件依赖radix-svelte实现底层交互，版本不匹配可能导致鼠标事件监听失效。确认你的项目中radix-svelte和svelte-shadcn都是最新稳定版本，执行npm update radix-svelte svelte-shadcn更新后再测试。

• 排查自定义class的影响
  你给Select.Item加了select-item类，检查这个类的CSS规则中是否存在pointer-events: none或者其他阻断鼠标事件的属性——如果有，会导致组件无法捕获悬停事件，自然不会添加data-highlighted。移除这类规则后重试。

• 确认组件导入正确性
  确保所有Select相关组件（Root、Trigger、Content、Group、GroupHeading、Item）都是从svelte-shadcn正确导入的，比如：

  import { Select } from '@/components/ui/select'; // 路径根据你的项目结构调整
  

  避免导入了其他库或自定义的同名组件。

• 临时手动修复方案
  如果以上方法都无效，可通过手动绑定鼠标事件强制添加/移除属性：

  <Select.Item 
    value={parallelRun.id} 
    label={parallelRun.name} 
    class="select-item"
    on:mouseover={(e) => e.currentTarget.setAttribute('data-highlighted', '')}
    on:mouseleave={(e) => e.currentTarget.removeAttribute('data-highlighted')}
  >
    {parallelRun.name}
  </Select.Item>
  

  这个方案能直接触发高亮样式，适合临时应急，建议同时继续排查根本原因。

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