[Proposal] Highlight API

This proposal was inspired by this issue in Editing discussions.

Highlight API allows web developers to style arbitrary range objects without causing DOM updates of the view.

There are a number of scenarios where this would be useful, including third party spellcheck and grammar extensions, javascript implementation of find-on-page, or javascript, rendering of its own selection.

Currently, browsers do not provide this functionality which forces web developers to modify DOM in order to achieve desired effect. This increases complexity and causes unexpected behaviors and site crashes when third party extensions are trying to modify main document’s DOM.

The Highlight API provides a programmatic way of adding and removing highlights that do not affect the underlying DOM structure, but instead applies styles to text based on Range objects.

This feature would be super useful for Javascript frameworks that implement any aforementioned scenarios.

We would love to get thoughts on this from the community on the shape of the API, some open questions and use cases.

Link to the Explainer.

I am very supportive of this concept, and was planning to propose something similar myself sooner or later.

On the API side, I think you hit the nail right on the head, and that having HighlightRangeGroup objects contain Ranges is the way to go.

On the CSS Side (how does cascading and inheritance work, how does painting work, etc), I think you’re close, but actually are doing too much work. All the questions should already be answered by css-pseudo-4, and we can just reference that. You’re already referencing it to some degree, but trying to define some of it on your own as well. I don’t think that part is necessary, and we should just rely on css-pseudo-4.

One thing that’s missing from css-pseudo 4 is the priority/stacking between custom highlights, and missing from your explainer is the priority between custom highlights and the native ones. But once we sort this out, css-pseudo-4 should handle how these just fine.

Anyway, as you show with the open questions at the end of the explainer, there are more details to be ironed out, but I’m supportive of starting this, and would be happy to help with the spec (and possibly with the tests as well).

Really good API to save a lot of CPU time in the web!

How about to make Window and/or Document has getHighlight() which returns another instance of Selection? If so, developers can switch their web apps using Selection for highlighting with new one. E.g.,

let selection = window.getHighlight ? window.getHighlight() : window.getSelection();
selection.collapse(foo, 0);
selection.extend(bar, bar.length);

Sounds quite neat. Let me know if you want need to set up a repo, or you are happy to continue developing the idea here.