::highlight 不能直接高亮搜索关键词，因其仅为样式钩子，需js手动定位文本、创建range并注册highlight实例，且仅chrome 127+实验支持。
::highlight 目前不能直接用于搜索关键词高亮——它不接受字符串匹配，也不自动查找文本，必须配合 JavaScript 手动创建 Range 对象并注册到 CSS.highlights。浏览器支持极有限（仅 Chrome 127+ 启用实验性 flag），且不兼容 Safari/Firefox。
为什么不能直接写 ::highlight(search) + 正则匹配？
::highlight() 是纯样式钩子，只响应已注册的 Highlight 实例，它本身不做任何文本查找或 DOM 遍历。所谓“高亮搜索结果”，本质是两步：先定位文本位置（JS），再把位置转成 Range（JS），最后挂载样式（CSS）。漏掉任何一步，::highlight 就只是个空壳。
- 你不能在 CSS 里写
::highlight(search) { ... }并指望它自动匹配页面中所有 “search” 字符串 -
Highlight构造函数只接受Range实例，不接受字符串、正则或选择器 -
Range.setStart()和setEnd()的offset是字符偏移量，不是索引位置，需基于文本节点内容精确计算
怎样正确创建并注册一个可被 ::highlight() 绑定的高亮组？
核心是用 new Highlight(...ranges) 包装好范围，再通过 CSS.highlights.set(key, highlight) 注册。key 名必须和 ::highlight(key) 中的字符串完全一致（区分大小写）。
- 先用
document.createTreeWalker(node, NodeFilter.SHOW_TEXT)收集所有文本节点 - 对每个文本节点调用
nodeValue.indexOf(keyword)或正则匹配，获取起始/结束位置 - 用
range.setStart(textNode, startOffset)和range.setEnd(textNode, endOffset)定义范围 - 多个
Range可一起传给new Highlight(r1, r2, r3)，它们会共用同一套样式 - 注册后，CSS 中必须写
::highlight("my-search-highlight") { background: #ff0; }，引号不能省
常见报错与兼容性陷阱
遇到 TypeError: Failed to construct 'Highlight': parameter 1 is not of type 'Range' 或样式不生效，大概率是以下原因：
-
Range的startContainer不是文本节点（比如传了<p></p>元素），setStart()会静默失败 - 注册时 key 名拼写错误，或 CSS 中用了中文引号、全角括号，如
::highlight（"test"） - Chrome 未启用
chrome://flags/#enable-css-highlight-api，该 API 默认关闭 - 试图在
Range跨越多个文本节点时复用同一个Range实例（不行，每个跨节点匹配需独立Range） - 高亮后未清理旧
Highlight，导致重复注册覆盖或内存泄漏：CSS.highlights.delete("old-key")得手动调
真正稳定的搜索高亮，目前仍应优先用 <mark></mark> 包裹 + CSS 控制；::highlight 适合编辑器类场景（如 Monaco、CodeMirror），需要频繁增删高亮且不能污染 DOM 结构——但它的门槛和维护成本远高于传统方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
