概述
Highlight API 允许创建命名高亮 `new Highlight(range1, range2...)` 并通过 `CSS.highlights.set(name, highlight)` 注册,样式通过 `::highlight(name)` 控制,适合搜索匹配与批注。
示例
```js
const r = new Range()
r.selectNodeContents(document.querySelector('#article'))
const h = new Highlight(r)
CSS.highlights.set('match', h)
```
```css
::highlight(match) { background: yellow }
```
工程建议
- 管理与清理:维护高亮集合并适时清理;避免过多 Range 导致性能问题。
- 与选择协作:避免高亮遮挡文本与影响可选;提供关闭入口。
- 兼容:回退到 DOM 包裹与类名方案;保证可访问性。
参考与验证
- MDN Highlight API 文档:https://developer.mozilla.org/docs/Web/API/CSS_Highlight_API
- Chrome 平台文档:https://developer.chrome.com/docs/web-platform/css-highlight-api/

发表评论 取消回复