CSS Custom Highlights & ProseMirror

I was reading documentation about the recently-available-in-most-browsers CSS Highlight API. It seems like it could be cool to figure out a path to rendering ProseMirror decorations (or something like them) as CSS Highlights — for one, it’d mean the potential to style text ranges without creating additional DOM structure for features like spell check errors.

It seems like one challenge here is that the highlights API leverages existing document range creation API’s to do its thing — and so we would need some way to keep a set of highlights up to date for a given DOM structure, after the DOM has been rendered by ProseMirror but with some awareness of the relationship between document positions and corresponding DOM structures. I haven’t really started hacking the ProseMirror internals to see if something like this is already possible using plugin hooks — but figured I’d start a thread here, in the event that someone else has been thinking about this!

I tend to not pay too much attention to web features until they are widely supported (since the library doesn’t just target bleeding-edge browsers). At a glance, this indeed look interesting, but I’m not sure it really offers much advantages for a system like ProseMirror, which already controls the DOM inside of it. I doubt these are much more lightweight than wrapping elements, as far as the work the browser needs to do. So maybe its intended use case is more in the direction of code that shouldn’t mess with the DOM (it seems something like Grammarly could use it to highlight in-editor content without being rude about it and disrupting the actual content).