Highlighting text without wrapping it in spans: the CSS Custom Highlight API
javascript
dev.to
The CSS Custom Highlight API is a browser API that lets you style arbitrary ranges of text by registering Range objects in a Highlight, adding it to CSS.highlights under a name, and targeting that name with the ::highlight() pseudo-element. The DOM stays exactly as it was: no , no , no extra nodes. I ran into this while building a highlights-and-notes feature, and it changed how I think about the problem. This post covers why the old approach hurts, how the native API works, what support looks