Web API - CSS Custom Highlight

原文链接：https://github.com/taoliujun/blog/issues/63

CSS Custom Highlight

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

CSS Custom Highlight为页面上的Range对象，创建高亮标识，并结合css伪元素::highlight自定义显示。

使用场景有搜索词高亮、多人协作时的文本多色高亮等。

接口

Highlight

创建高亮对象，并包含若干Range对象。例如：

const user1Highlight = new Highlight(range1, range2);

HighlightRegistry

为高亮对象注册css标识，即可在css中访问。例如：

// javascript
CSS.highlights.set('user-1-highlight', user1Highlight);

// css
::highlight(user-1-highlight) {
    background-color: yellow;
    color: black;
}

示例

示例：https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html

1. 为Range区域设置了特殊的样式。