{
  "id": 226639,
  "title": "::highlight() with a text-shadow safety net",
  "url": "https://urgent.news/2026/08/06/highlight-with-a-text-shadow-safety-net",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-06T16:07:58.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/leobaniak/highlight-with-a-text-shadow-safety-net-4n72"
  },
  "original_language": "en",
  "account": "Dynamic highlighting of text on the web is often achieved by wrapping the desired words in a <span> element and applying styles to that span. However, this approach becomes cumbersome when the range to be highlighted is dynamic, such as in search results, user selections, or live comment threads. The CSS Custom Highlight API offers a solution to this problem. Sunkanmi Fafowora's walkthrough on Piccalilli explains how to use the API in conjunction with a text-shadow fallback to ensure a clean degradation on engines that have not yet implemented the feature.\n\nThe web already has a set of highlight pseudo-elements such as ::selection, ::target-text, ::search-text, ::spelling-error, and ::grammar-error, each of which styles a range of text that the browser decides. ::highlight() is different in that it allows you to name the range and register it from JavaScript before any visual changes occur. This process involves three components: a Highlight instance, a DOM Range object describing the text to be highlighted, and a slot in the CSS.highlights registry that connects the two.\n\nTo implement this, you create a new Highlight instance and style the designated name using CSS. The Range object is created using standard DOM methods, and the range is then added to the Highlight instance. Multiple ranges can be added to a single highlight, allowing for efficient styling of various text segments without changing the markup.\n\nWhen the Highlight API is not available, the fallback is a real <mark> element styled with the same color and text-shadow as the API. This ensures that the visual effect remains consistent whether it is generated through the API or the fallback. This approach is particularly useful for tasks such as highlighting search terms, tinting user contributions in transcripts, or coloring diffs in text fields.\n\nTo implement this with enhanced functionality, one could start by keeping the existing <mark> element for the fallback, then add a highlight registration on top of it. This allows for a seamless upgrade path, where the effect is immediately visible in browsers that support ::highlight(), and the semantics of the markup remain intact.",
  "summary": "You have a paragraph and you want to paint a glow across four words in the middle of it. Not a whole sentence, not a semantic phrase — a range. The old move is to wrap those words in a <span> at build time and style the span. That works until the range is dynamic. Search results. A user selection you want to persist. A live comment thread with per-user tint. As soon as the range moves, the span…",
  "key_points": [
    "CSS Custom Highlight API enables dynamic text highlighting",
    "::highlight() allows named ranges and JS registration",
    "Fallback uses <mark> element with same styling"
  ],
  "editors_take": "The ::highlight() API offers a flexible way to dynamically highlight text on the web, degrading cleanly to a styled <mark> element in unsupported browsers, with a consistent visual effect.",
  "illustration": "https://urgent.news/ill/226639.png",
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}