Re: [csswg-drafts] [css-highlight-api] Use marker nodes to declaratively annotate highlights (#13381)

I think there's something I'm missing here. Here's how I currently see it:

## CSS highlights via JS

- ✅ The `<pre>` in your source is very human readable, and human writable.
- It may not be human readable in the elements panel in future if highlight ranges are exposed.
- ❌ Depends on JS for highlighting, which results in a flash of unhighlighted content.
- ❌ After the JS runs, your tree is 'riddled' with DOM ranges & CSS highlights.

In effect, you have a human-editable source (HTML), and JS takes care of 'riddling' it with highlights.

## CSS highlights via the highlightmap idea

- ✅ The `<pre>` in the HTML source is very human readable 
- ❌ It looks human-writable, but it isn't. Making changes to this will break unless to also update the highlightmap which is elsewhere in the tree.
- It may not be human readable in the elements panel in future if highlight ranges are exposed.
- ❌ After the map is processed your tree is 'riddled' with DOM ranges & CSS highlights.

In effect, you have a human-editable source which isn't the served HTML. Some build tool, reads that, and generates the HTML which contains the highlight map. The browser processes this and 'riddles' it with highlights.

Because the human-editable source isn't the HTML, having the `<pre>` be human readable doesn't seem all that useful.

## CSS highlights via the marker idea

- ❌ The `<pre>` in your source isn't very human readable, as it contains marker nodes (riddled?).
- ✅ But, that discourages you from editing it directly - you know there's more going on here.

Because the human-editable source isn't the HTML, having the `<pre>` be human readable doesn't seem all that useful.

## CSS highlights via spans

- ❌ The `<pre>` in your source isn't very human readable, as it contains spans (riddled?).
- ✅ But, that discourages you from editing it directly - you know there's more going on here.
- ❌ These are heavier to parse and style-calculate than highlight ranges.

Because the human-editable source isn't the HTML, having the `<pre>` be human readable doesn't seem all that useful.

---

So:

- All solutions involve riddling the tree with _something_.
- Aside from the JS solution (which has its own issues), the human-edited source isn't the thing directly sent to browsers. But that's… pretty common.

-- 
GitHub Notification of comment by jakearchibald
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13381#issuecomment-3913389855 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 17 February 2026 09:37:27 UTC