- CSS 自定义高亮 API 使开发人员能够在不改变 DOM 结构的情况下设置特定文本段的样式。
- 通过将 Range 和 Highlight 对象与 HighlightRegistry 结合使用，可以以编程方式应用自定义视觉标记。
- ::highlight() 伪元素提供了一个专用的 CSS 接口，用于独立设置已注册高亮元素的样式。
- 这种方法通过减少 DOM 重量来优化性能，并避免插入包装元素引起的布局偏移。
你是否曾有过这样的挫败感：想在页面上突出显示某些词语，却发现必须用一百万个括号把所有内容括起来？ <span> or <mark> 标签？这对性能来说简直是噩梦，而且真的会搞乱你的 CSS 布局。嗯，这就是…… CSS 自定义高亮 API 它的出现改变了游戏规则，对于任何需要在不修改实际 HTML 结构的情况下动态指出文本的人来说，它都是一个颠覆性的功能。
本质上，这个 API 是对我们已知事物的扩展，例如 ::selection or ::spelling-error但这给了我们开启王国之门的钥匙。我们不再依赖浏览器来决定高亮显示哪些内容， 现在您可以定义任意范围的文本 然后根据你的喜好设置样式。这是一种更简洁的方式来处理搜索结果、协作编辑或语法高亮等功能，而不会给 DOM 增加不必要的负担。
为什么要放弃标记元素？
长期以来， <mark> 标签曾是强调文本的首选工具。虽然它在基本语义方面表现出色，但也存在一些相当恼人的局限性。例如， 向 DOM 中插入节点可能会触发代价高昂的布局重新计算。这可能会导致您的网站运行缓慢，尤其是在播放动画时。但真正的麻烦在于您需要高亮显示文本的时候。 跨越多个 HTML 元素由于你不能直接打开一个标签，然后在另一个元素内将其关闭而不产生无效的 HTML，因此你被迫将高亮显示分成几个小部分，这很笨拙。
API的核心概念
要实现这一点，你需要熟悉一些特定的对象。首先，是…… 范围对象它本质上是一个指针，指示文档中的“起始位置和结束位置”。然后我们还有…… 高亮对象它将一个或多个此类范围捆绑在一起，以便将它们视为一个单一的样式组。所有这些都由……管理。 亮点注册表 （通过访问 CSS.highlights），它就像一张地图，您可以在其中用唯一的名称注册您的亮点。
逐步实施
在屏幕上获得自定义高光效果只需简单的四步操作。首先，你 创建 Range 对象 在 JavaScript 中，你可以通过识别文本节点并使用类似以下的方法来实现这一点： setStart 和 setEnd 精确定位你想针对的角色。如果你需要覆盖整个元素， setStartBefore 和 setEndAfter 是你最好的朋友。
范围设定好之后，第二步是…… 实例化一个新的 Highlight 对象这里的一个很棒的功能是，一个高亮标记可以包含多个范围。这对于“页面内查找”功能来说非常理想，因为你希望页面中出现的每个单词都使用相同的颜色。之后，你 记录亮点 使用 CSS.highlights.set('my-name', highlight)这样就为你的突出显示添加了一个自定义标识符，CSS 引擎可以实际识别该标识符。
最后一步是应用样式。您可以使用 ::highlight(my-name) 伪元素 在你的 CSS 文件中。由于这不是一个标准元素，你只能使用少数几个属性，但你可以轻松地更改它。 背景颜色或文字装饰 为了使这些范围更加醒目。例如，您可以使用亮黄色背景来显示搜索结果，或者在协作编辑器中使用删除线来显示已删除的文本。
高级使用和性能优势
最令人印象深刻的应用场景之一是代码语法高亮。传统上，像 Prism.js 这样的库会注入成千上万个 span 元素来为标记着色，这会导致 DOM 变得异常臃肿。而使用自定义高亮 API，你可以在不向页面添加任何元素的情况下，对 JavaScript 代码进行标记化并应用样式。这可以保持 DOM 的精简，并防止浏览器因处理大型文档而崩溃。
如果需要即时更改高亮显示的内容，无需重新开始。因为高亮对象与范围关联， 只需更新范围的边界即可 屏幕上的视觉高亮部分将自动更新。如果您想移除它，可以使用以下方法移除特定范围： delete Highlight 对象上的方法或 清除所有注册信息 使用 CSS.highlights.delete.
辅助功能和浏览器支持
需要记住的是，这些亮点纯粹是视觉上的， 不提供固有的语义含义 对屏幕阅读器而言。如果您正在构建一个将可访问性放在首位的应用，则应该使用…… type Highlight 接口的属性用于指定高亮显示的是拼写错误还是语法错误，但对此的支持情况各不相同。如有疑问， 用 ARIA 标签来点缀你的亮点 或者说，语义化 HTML 才是正确的方向。
关于兼容性，这个 API 最近有了显著提升。它在 Chrome、Edge 和 Safari 中已经非常稳定，Firefox 也加入了支持行列（大约从 140 版本开始），这意味着它现在适用于大多数生产环境。为了避免在旧版浏览器上崩溃，建议在运行代码之前检查 CSS 对象中是否存在“highlights”属性。
该 API 从根本上改变了我们处理文本的方式，它将视觉呈现与 HTML 结构解耦。通过利用 Range 和 Highlight 对象，开发者可以实现实时搜索和语法着色等复杂功能，同时保持 DOM 的轻量级和性能的流畅性，从而有效地绕过了传统包装元素的限制。
