v148 · DOM · CSS Highlights

Annotation Layer

OpaqueRange (Chrome 148 origin trial) exposes geometry and CSS Custom Highlight ranges for text inside native <textarea> elements. Select text, choose an annotation type (comment / important / fix-me / spell-check), and see coloured highlights drawn directly over the native control — no contenteditable replacement needed.

Annotation layer on <textarea> simulated

Select text in the textarea below, then choose an annotation type.

Annotations (0)

Select text in the textarea and click an annotation type button. Highlights are drawn over the native control using canvas overlay (OpaqueRange geometry simulation — real OpaqueRange would use createValueRange().getClientRects()).

// Chrome 148 OpaqueRange — annotations on native textarea
const ta = document.querySelector('textarea');

// Create a range over the value substring [start, end)
const range = ta.createValueRange(start, end);

// Get geometry — no contenteditable needed
const rects = range.getClientRects();

// Apply CSS Custom Highlight (CSS Highlight API)
const highlight = new Highlight(range);
CSS.highlights.set('annotation-comment', highlight);
// In CSS: ::highlight(annotation-comment) { background: #eff6ff; }

// Or draw the rects onto a canvas overlay:
rects.forEach(rect => {
  ctx.fillRect(
    rect.left - ta.getBoundingClientRect().left,
    rect.top  - ta.getBoundingClientRect().top,
    rect.width, rect.height
  );
});

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference