CSS 自定义高亮 API

CSS 自定义高亮 API 模块提供了一种编程式的方法，可以针对由 Range 对象定义的特定文本范围，而不会影响底层的 DOM 结构。然后可以通过 ::highlight() 伪元素选择这些 Range 对象，并添加和删除高亮样式。该模块的功能可以创建类似于文本编辑器高亮拼写或语法错误，以及代码编辑器高亮语法错误的高亮效果。

CSS 自定义高亮 API 扩展了其他高亮伪元素的概念，例如 ::selection、::spelling-error、::grammar-error 和 ::target-text，它提供了一种创建任意文本范围（在 JavaScript 中定义为 Range 对象）并通过 CSS 进行样式设置的方法，而不是局限于浏览器定义的范围。

自定义高亮 API 的实际应用

要使用 CSS 自定义高亮 API 在网页上启用文本范围的样式设置，你需要创建一个 Range 对象，然后为该范围创建一个 Highlight 对象。使用 HighlightRegistry.set() 方法注册高亮后，你可以使用 ::highlight() 伪元素选择该范围。在 set() 方法中定义的名称用作 ::highlight() 伪元素选择器的参数来选择该范围。通过 ::highlight() 伪元素选择的范围可以使用有限数量的属性进行样式设置。

<h1>Directions</h1>
<h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2>
<ol><li>Head south on Lincoln Memorial Circle</li
  ><li>Turn right toward Independence Ave</li
  ><li>Turn left onto Independence Ave</li
  ><li>Turn right onto West Basin Dr</li
  ><li>Look up when you reach 64 Independence Ave!</li>
</ol>
<hr />
<label
  >Number of steps completed:
  <input type="number" min="0" max="5" value="0" id="currentStep" />
</label>

此示例使用 text-decoration 属性划掉我们 JavaScript 定义的 steps 高亮范围

css

::highlight(steps) {
  text-decoration: line-through;
  color: blue;
}

我们创建了一个具有开始和结束节点（在此例中是同一个节点）的 Range。然后我们使用 CSS HighlightRegistry 接口的 set() 方法将此范围设置为 Highlight。

const rangeToHighlight = new Range();
const list = document.querySelector("ol");
rangeToHighlight.setStart(list, 0);
rangeToHighlight.setEnd(list, 0);

CSS.highlights.set("steps", new Highlight(rangeToHighlight));

当完成的步骤数发生变化时，事件监听器会更新高亮范围的末尾

const currentPositionSlider = document.querySelector("input");
currentPositionSlider.addEventListener("change", (e) => {
  rangeToHighlight.setEnd(list, e.target.value);
});