::highlight() 伪元素需配合 javascript 注册 highlight 实例才生效，仅写 css 无效；chrome≥128 且启用 flag 才支持；key 必须严格匹配；range 必须指向文本节点；仅支持 color、background-color、text-decoration、text-shadow 四个样式属性。
::highlight() 伪元素本身不触发高亮，它只是样式钩子——必须配合 JavaScript 创建 Range、封装成 Highlight、注册进 CSS.highlights，三者缺一不可。纯 CSS 声明 ::highlight(mykey) { ... } 不会自动匹配任何文本。
为什么 ::highlight() 写了但没效果？
最常见原因是只写了 CSS，没走 JS 注册流程。浏览器看到 ::highlight(mykey) 时，会去 CSS.highlights 查找键为 "mykey" 的 Highlight 实例；查不到就静默忽略，不报错也不渲染。
- Chrome 必须 ≥128，且
chrome://flags/#enable-css-highlight-api已启用（默认关闭） -
CSS.highlights.set("mykey", new Highlight(range))中的 key 必须和 CSS 里完全一致（大小写、引号类型、无空格） -
Range.setStart()的第一个参数必须是文本节点（node.nodeType === Node.TEXT_NODE），传<p></p>元素会失败但不报错 - CSS 必须在全局作用域声明，不能在
@layer、style标签的 scoped 模式或 CSS-in-JS 局部作用域中
Range 怎么准确定位关键词位置？
关键词匹配必须手动遍历文本节点，不能靠正则全局替换或 innerHTML 操作——那会破坏 DOM 结构，也绕过 Highlights API。
- 用
document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)收集所有文本节点 - 对每个
textNode.nodeValue调用.indexOf(keyword)或.matchAll(/keyword/g)获取起始偏移量 -
range.setStart(textNode, startOffset)和range.setEnd(textNode, endOffset)的 offset 是字符数，不是字节数或 DOM 索引 - 一个关键词跨两个文本节点（比如被
<strong></strong>切开）？必须拆成两个独立Range，分别注册
哪些 CSS 属性能用在 ::highlight() 里？
仅限 4 个核心文本样式属性，其余全部被忽略：
colorbackground-color-
text-decoration（支持line-through、underline等，但不支持颜色/样式单独控制） text-shadow
以下写法无效：background-image、border、transform、font-size、-webkit-text-stroke（虽文档提过，但实测 Chromium 128+ 不支持）。
动态内容更新后高亮消失怎么办？
React/Vue 渲染新段落、AJAX 加载新文本、用户编辑富文本框——这些操作都会生成新文本节点，原有 Range 对象因引用失效而断开，高亮立即消失。
- 不能依赖一次性初始化；需监听 DOM 变化（如
MutationObserver）或在框架生命周期钩子（如useEffect、mounted）中重跑高亮逻辑 - 每次重新注册前，建议先
CSS.highlights.delete("mykey")避免旧范围残留 - 高频更新场景下，避免每输入一个字就全量扫描；可节流 + 基于变更区域局部重扫
真正难的不是写对 ::highlight() 这一行 CSS，而是把文本位置转成合法 Range、再确保它始终绑定到当前 DOM 节点上——这个映射关系极其脆弱，尤其在现代前端框架的虚拟 DOM 下。别省略 console.log(range.startContainer) 这一步。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
