Svelte中为类实现KaTeX公式悬停高亮等条件样式的问题

1. 为什么需要用:global()标记类名 #

Svelte 默认开启样式隔离机制，编译时会给组件<style>标签内的所有自定义类名添加唯一的哈希后缀，避免不同组件的样式冲突。而你通过 KaTeX 的\htmlClass插入的.test类，是在运行时渲染到{@html}块里的，不会被Svelte提前识别并添加对应的哈希后缀，直接写.test选择器的话编译后会变成.test[svelte-hash=xxx]，无法匹配到实际渲染的元素，所以必须用:global()告诉Svelte不要给这个类名加哈希，全局生效才能正常匹配。

2. 你写的hoverByClass函数不生效的原因 #

你直接在组件script顶层调用这个函数的时候，Katex组件还没完成渲染，DOM树上还没有.test类的元素，document.getElementsByClassName拿到的是空集合，事件绑定根本没生效。而且后续点击按钮切换公式时，新渲染出来的.test元素也不会自动绑定事件，因为你只在组件初始化时调用了一次函数。

3. 实现方案推荐 #

你不需要用store这么重的能力，两种方案都可以实现需求：

方案1：仅CSS实现（悬停哪个元素就高亮哪个） #

如果只是要悬停对应.test元素时高亮自身，直接加全局hover样式即可，不需要写JS：

:global(.test) {
  color: red;
}
:global(.test:hover) {
  background-color: pink;
}

方案2：响应式状态实现（悬停任意一个.test，所有同类元素都高亮） #

如果需要全类同步高亮，用Svelte的响应式状态配合事件委托更简洁，不需要手动操作DOM：
首先修改App.svelte的script部分：

import Katex from "./Katex.svelte"

let isTestHovered = false;
// math变量、changeMath等原有逻辑保持不变
// ...

然后把所有Katex组件包在一个父容器里，加事件委托：

<div 
  on:mouseover={(e) => {
    if (e.target.classList.contains('test')) isTestHovered = true
  }}
  on:mouseout={(e) => {
    if (e.target.classList.contains('test')) isTestHovered = false
  }}
  style:--test-bg={isTestHovered ? 'pink' : 'transparent'}
>
  <!-- 原有所有用到Katex组件的代码都放在这里 -->
  <h1>KaTeX svelte component demo</h1>
  <h2>Inline math</h2>
  Our math equation: <Katex {math}/> and it is inline.
  <!-- ... 其他原有内容 -->
</div>

最后修改样式部分：

:global(.test) {
  color: red;
  background-color: var(--test-bg);
}

如果确实想用你原来的手动操作DOM的方案，只需要调整绑定时机即可，记得每次绑定前清除旧事件避免重复绑定：

import { onMount } from 'svelte';
// 其他原有代码...

onMount(() => {
  hoverByClass("test","pink");
})
// 每次切换公式后重新绑定事件
$: index, hoverByClass("test","pink");

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