在 HTML 中，若要通过 Highlight 的 add 方法将 Range 添加到高亮注册表（highlight registry），通常需要结合使用 JavaScript 和浏览器的 Selection API 或 Range 对象。以下是一个基本示例，说明如何实现这一操作。✅ 示例：使用 window.getSelection() 获取选区并添加到高亮注册表// 获取当前选区 const

本文深入解析了现代浏览器（仅 Chromium 120+）中基于 CSS Highlight API 实现文本高亮的正确实践：澄清了常见误区——Highlight 是抽象基类，不可直接实例化或调用 add() 方法；强调必须通过继承 Highlight 创建自定义子类（如 KeywordHighlight），在其中实现 getRanges() 返回有效 Range 数组，并利用 document.highlightRegistry.set(name, highlight) 将其注册到高亮注册表；同时详解了配套的 CSS ::highlight(name) 伪元素用法、adoptedStyleSheets 动态注入样式、Range 生命周期管理等关键细节，直击 Range 失效、样式不生效、环境兼容性等高频痛点，为构建稳定、可维护的前端高亮功能提供权威、落地的技术指南。

Highlight.add() 为什么报错 “not a function”

因为 Highlight 是一个抽象基类，不能直接实例化，更没有静态 add 方法。你真正要操作的是 HighlightRegistry 实例，它通过 document.adoptedStyleSheets 关联的 CSSOM API 配合使用——但注意：目前（2024 年中）HighlightRegistry 仅在 Chrome 120+ 启用，且需开启实验性 flag（chrome://flags/#enable-experimental-web-platform-features），否则 document.highlightRegistry 是 undefined。

• 检查环境：if ('highlightRegistry' in document) 必须为 true，否则跳过
• Highlight 子类必须显式定义（如 class MyHighlight extends Highlight），不能直接 new Highlight()
• add() 是 HighlightRegistry 实例方法，不是 Highlight 上的方法

如何正确注册 Range 高亮并绑定到自定义 Highlight 类

核心流程是：创建 Range → 封装进自定义 Highlight 子类实例 → 调用 registry 的 set()（不是 add()）存入命名条目。这里没有 add() 方法；HighlightRegistry 使用 set(name, highlight) 和 get(name) 管理映射。

• Range 必须是有效、已连接文档的范围（range.intersectsNode(el) 可预检）
• 自定义类必须继承 Highlight 并实现 getRanges()，返回 Array
• 注册时 name 是字符串键，后续 CSS 用 ::highlight(my-highlight) 引用

class KeywordHighlight extends Highlight {
  constructor(ranges) {
    super();
    this._ranges = ranges;
  }
  getRanges() {
    return this._ranges;
  }
}

const range = document.createRange();
range.selectNode(document.querySelector('p'));
document.highlightRegistry.set('keyword', new KeywordHighlight([range]));

CSS 中怎么匹配并样式化这个高亮

CSS 里用 ::highlight() 伪元素，括号内名称必须与 registry.set() 的第一个参数完全一致（区分大小写、不可含空格）。

• 必须配合 adoptedStyleSheets 注入，不能写在