Custom Highlight API Hybrid

Try: Type in the search box—matches in the paragraph highlight without wrapping each hit in <mark>.

Search in text

The platform can paint arbitrary ranges: the browser keeps the DOM clean while CSS owns the highlight appearance via ::highlight().

Source

::highlight(search-hit) {
  background-color: #fde047;
  color: #422006;
}

CSS.highlights.clear();
const r = document.createRange();
r.setStart(node, index);
r.setEnd(node, index + query.length);
CSS.highlights.set("search-hit", new Highlight(...ranges));

Support: Baseline 2025 per MDN—feature-detect CSS.highlights. Older engines need a <mark> fallback.