必须用 JavaScript 三步注册：创建 Range（仅限 Text 节点，用 setStart/setEnd 指定字符偏移）、新建 Highlight 实例、调用 CSS.highlights.set()；再通过同名 ::highlight() 伪元素定义样式，且仅支持有限CSS属性。
不能直接用 HTML 标签或属性触发 CSS 自定义高亮 API，它必须通过 JavaScript 创建 Range + Highlight + CSS.highlights.set() 三步注册，再配合 ::highlight() 伪元素生效。浏览器不支持在 HTML 中声明式使用该 API。
如何创建合法的 Range 并绑定到 textNode
自定义高亮只作用于纯文本节点（Text 类型），不能传 Element 或任意 DOM 节点。常见错误是直接对 <p> 元素调用 setStart，结果报错 InvalidNodeTypeError。
- 必须先获取真实
Text节点：比如document.querySelector("p").firstChild，且要确认它是nodeType === 3 -
setStart和setEnd的第二个参数是字符偏移量（不是 DOM 索引），从 0 开始计数 - 如果文本含换行、空格或 Unicode 组合字符（如 emoji + 变体选择符），
textContent.indexOf()可能返回错误位置，建议用Array.from(textContent).indexOf(...)更稳妥 - 一个
Range只能跨一个Text节点；跨标签（如<span>foo</span><em>bar</em>）需拆成多个Range并分别注册
为什么 highlight 没有出现在页面上
最常漏掉的是 CSS 中未正确定义 ::highlight()，或名称不匹配。这个伪元素不会触发任何渲染警告，静默失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- CSS 中的名称必须和
CSS.highlights.set("xxx", highlight)的第一个参数完全一致（区分大小写） -
::highlight()只接受单个标识符，不支持空格、斜杠、点号；推荐只用字母、数字、短横线 - 样式限制严格：仅支持
color、background-color、text-decoration、font-weight等少数属性，border、padding、transform均无效 - 若页面有 Shadow DOM，
::highlight()默认不穿透；需在 shadow root 内单独注入样式
如何安全地批量高亮多个关键词
重复调用 CSS.highlights.set() 会覆盖同名高亮组，不能“追加”。要实现多关键词共存，必须统一管理一个 Highlight 实例并动态更新其内部 Range 列表。
立即学习“前端免费学习笔记（深入）”；
- 不要为每个词新建
Highlight并多次set()；而是用new Highlight(...)接收多个Range构造函数参数 - 例如：
const h = new Highlight(range1, range2, range3)，然后一次性CSS.highlights.set("search-results", h) - 后续更新时，重新构造
Highlight并再次set()—— 浏览器会自动卸载旧范围、应用新范围，无闪烁 - 注意内存：长期保留大量
Range对象可能阻碍 GC，尤其在搜索框频繁输入时，建议每次重建而非复用
真正容易被忽略的是 Range 的生命周期绑定——它不自动跟随 DOM 变化。如果高亮文本所在的节点被 innerHTML 覆盖、或父元素被 removeChild()，对应 Range 会变成“分离状态”，但 Highlight 实例仍存在，CSS 依然尝试渲染，结果是空白或错位。没有自动回收机制，得靠 JS 主动清理。
