最新的CSS API：CSS Custom Highlight
css Custom Highlight api即将到了，它实现了浏览器原生支持的CSS文本高亮功能，它的实现不会改变dom结构，因此性能非常高效。目前在谷歌Chrome 105中已经正式支持，相信它在将来会成为Web样式化选中文本的不二法门！下面由fly63前端网为大家简单介绍它的使用。
示例
首先来看一个示例：
<style>
:root::highlight(exp) {
background-color: #67C23A;
color: #fff;
}
</style>
<div id="container"><span>fly63-</span><span>web前端开发</span><span>感谢您的使用</span></div>
<script>
let r = new Range();
r.setStart(container, 0);
r.setEnd(container, 2);
CSS.highlights.set("exp", new Highlight(r));
</script>可以看出：以上代码使用::highlight()伪元素定义了一个背景颜色和字体颜色。在js部分通过Range对象创建文本选择范围，然后利用CSS.highlights的set方法注册到页面，类似于Map对象的操作。
效果如下：
::highlight()伪元素
这是css的一个新的伪元素，使用也是非常简单，语法如下：
::highlight(custom-highlight-name) {
color: #fff
}我们需要注意的是它支持的css样式有哪些? 同::selection这种伪元素比较一样，目前只支持部分文本相关样式，包括：
color:文本颜色
background-color/background:背景颜色，目前只支持单一颜色，gradient渐变颜色和background-image是不支持的
text-decoration:文本修饰 （在规范的第 2 版中受支持）
text-shadow:文本阴影
-webkit-text-stroke:文本描边
-webkit-text-fill-color:文本填充
这个伪类必须要有一个“参数”：custom-highlight-name，它用于代表高亮的名称，在示例中可以看出：CSS.highlights的set方法第一个参数就是它。
创建选区
创建Range对象方式有2种，比如：
let r = new Range();
或者
let r = document.createRange();Range对象的主要定位方法：
setStart：设置起点的位置
setEnd：设置结束点的位置
通过setStart和setEnd，就能完成一段选区的创建。当然它还有很多属性和方法，但这里不是我们介绍的重点。
注册高亮
高亮实例化，需要用到Highlight对象。HighlightRegistry通过访问的接口是CSS.highlights一个Map类对象，用于注册Highlight要使用CSS Custom Highlight API设置样式的对象。这里主要使用set方法，将给定Highlight对象添加到具有给定名称的注册表中，或者更新命名Highlight对象（如果它已存在于注册表中）。
const highlight = new Highlight(range1, range2, ...);
CSS.highlights.set("custom-highlight-name", highlight );PS：我们可以根据需要创建任意数量的 Highlight 对象。 例如，如果我们正在构建一个协作文本编辑器，其中每个关键词都获得不同的文本颜色，那么我们可以为每个 关键词 创建一个Highlight 对象。
上面注册的key名：custom-highlight-name，就是css伪类::highlight中提到的高亮名称。
由于目前兼容性比较差，需要判断一下使用：
if (!!CSS.highlights) {
/*支持CSS.highlights*/
}CSS.highlights的方法介绍：
clear()：Highlight从注册表中删除所有对象。
delete()：Highlight从注册表中删除命名对象。
entries()：返回一个新的迭代器对象，该对象Highlight按插入顺序包含注册表中的每个对象。
forEach()：Highlight按插入顺序为注册表中的每个对象调用一次给定的回调。
get()：Highlight从注册表中获取命名对象。
has()：返回一个布尔值，断言Highlight对象是否存在于注册表中。
keys()：别名HighlightRegistry.values()。
set()：将给定Highlight对象添加到具有给定名称的注册表中，或者更新命名Highlight对象（如果它已存在于注册表中）。
values()：返回一个新的迭代器对象，该对象Highlight按插入顺序产生注册表中的对象。
这些方法可以帮助我们更多的操作高亮注册表，比如更新高亮文本：可以通过CSS.highlights.clear()清除高亮注册表，然后从头开始。
结语
CSS Custom Highlight API真的值得我们的关注吗？当然，它太值得了！
即使CSS自定义高亮文本API一开始可能看起来有点复杂（即必须创建范围，然后高亮文本，然后注册它们，最后为它们设置样式），但它比创建新的DOM元素并插入要简单得多，而且不会改变dom结构，有着非常高的性能，经测试发现：CSS Custom Highlight API 的平均执行速度比基于DOM的高亮快5倍。
随着越来越多浏览器的支持，大家可以想象一下：该API能解决什么问题，解锁什么骚操作！
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
