Custom Highlight methods accept any AbstractRange (mdn#43744)

narasimhan-lakshmi · Josh-Cena · web-flow · commit a2d034663893 · 2026-04-12T12:20:54.000-04:00
* fixed AbstractRange instead Range

* Fix others

* Fix

---------

Co-authored-by: Joshua Chen &lt;sidachen2003@gmail.com&gt;
diff --git a/files/en-us/web/api/highlight/add/index.md b/files/en-us/web/api/highlight/add/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`add()`** method of the {{domxref("Highlight")}} interface adds a new {{domxref("Range")}} object to a highlight, to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.
+The **`add()`** method of the {{domxref("Highlight")}} interface adds a new {{domxref("AbstractRange")}} object to a highlight, to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.add()")}}.
 
@@ -22,7 +22,7 @@ add(range)
 ### Parameters
 
 - `range`
-  - : A {{domxref("Range")}} object to add to the `Highlight`.
+  - : An {{domxref("AbstractRange")}} object to add to the `Highlight`.
 
 ### Return value
 
diff --git a/files/en-us/web/api/highlight/clear/index.md b/files/en-us/web/api/highlight/clear/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`clear()`** method of the {{domxref("Highlight")}} interface removes all the {{domxref("Range")}} objects from a `Highlight` object.
+The **`clear()`** method of the {{domxref("Highlight")}} interface removes all the {{domxref("AbstractRange")}} objects from a `Highlight` object.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.clear()")}}.
 
diff --git a/files/en-us/web/api/highlight/delete/index.md b/files/en-us/web/api/highlight/delete/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`delete()`** method of the {{domxref("Highlight")}} interface removes a specified {{domxref("Range")}} object from a `Highlight` object.
+The **`delete()`** method of the {{domxref("Highlight")}} interface removes a specified {{domxref("AbstractRange")}} object from a `Highlight` object.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.delete()")}}.
 
@@ -22,7 +22,7 @@ delete(range)
 ### Parameters
 
 - `range`
-  - : The {{domxref("Range")}} object to remove from the `Highlight`.
+  - : The {{domxref("AbstractRange")}} object to remove from the `Highlight`.
 
 ### Return value
 
diff --git a/files/en-us/web/api/highlight/entries/index.md b/files/en-us/web/api/highlight/entries/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`entries()`** method of the {{domxref("Highlight")}} interface returns a new [Iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators) object that contains an array of `[range, range]` for each {{domxref("Range")}} object in the `Highlight` object, in insertion order.
+The **`entries()`** method of the {{domxref("Highlight")}} interface returns a new [Iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators) object that contains an array of `[range, range]` for each {{domxref("AbstractRange")}} object in the `Highlight` object, in insertion order.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.entries()")}}.
 
@@ -25,7 +25,7 @@ None.
 
 ### Return value
 
-A new iterator object that contains an array of `[range, range]` for each `Range` object in the given `Highlight`, in insertion order.
+A new iterator object that contains an array of `[range, range]` for each `AbstractRange` object in the given `Highlight`, in insertion order.
 
 ## Examples
 
diff --git a/files/en-us/web/api/highlight/foreach/index.md b/files/en-us/web/api/highlight/foreach/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`forEach()`** method of the {{domxref("Highlight")}} interface executes a provided function once for each {{domxref("Range")}} object in the `Highlight` object, in insertion order.
+The **`forEach()`** method of the {{domxref("Highlight")}} interface executes a provided function once for each {{domxref("AbstractRange")}} object in the `Highlight` object, in insertion order.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.forEach()")}}.
 
@@ -23,9 +23,9 @@ forEach(callbackFn, thisArg)
 ### Parameters
 
 - `callback`
-  - : Function to execute for each `Range` object, taking three arguments:
+  - : Function to execute for each `AbstractRange` object, taking three arguments:
     - `range`, `key`
-      - : The current `Range` object being processed in the `Highlight`. As there are no
+      - : The current `AbstractRange` object being processed in the `Highlight`. As there are no
         keys in `Highlight`, the `range` is passed for both arguments.
     - `highlight`
       - : The `Highlight` object which `forEach()` was called upon.
diff --git a/files/en-us/web/api/highlight/has/index.md b/files/en-us/web/api/highlight/has/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`has()`** method of the {{domxref("Highlight")}} interface returns a boolean indicating whether a {{domxref("Range")}} object exists in a `Highlight` object or not.
+The **`has()`** method of the {{domxref("Highlight")}} interface returns a boolean indicating whether an {{domxref("AbstractRange")}} object exists in a `Highlight` object or not.
 
 `Highlight` is a {{jsxref("Set")}}-like object, so this is similar to using {{jsxref("Set.has()")}}.
 
@@ -22,7 +22,7 @@ has(range)
 ### Parameters
 
 - `range`
-  - : The `Range` object to test for presence in the `Highlight` object.
+  - : The `AbstractRange` object to test for presence in the `Highlight` object.
 
 ### Return value
 
diff --git a/files/en-us/web/api/highlight/highlight/index.md b/files/en-us/web/api/highlight/highlight/index.md
@@ -9,7 +9,7 @@ browser-compat: api.Highlight.Highlight
 {{APIRef("CSS Custom Highlight API")}}
 
 The **`Highlight()`** constructor returns a newly created
-{{domxref("Highlight")}} object which can hold a collection of {{domxref("Range")}} objects to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.
+{{domxref("Highlight")}} object which can hold a collection of {{domxref("AbstractRange")}} objects to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.
 
 ## Syntax
 
@@ -22,7 +22,7 @@ new Highlight(range1, range2, /* …, */ rangeN)
 ### Parameters
 
 - `range1`, …, `rangeN` {{optional_inline}}
-  - : One or more initial {{domxref("Range")}} objects to add in the new highlight.
+  - : One or more initial {{domxref("AbstractRange")}} objects to add in the new highlight.
 
 ### Return value
 
diff --git a/files/en-us/web/api/highlight/index.md b/files/en-us/web/api/highlight/index.md
@@ -7,11 +7,11 @@ browser-compat: api.Highlight
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`Highlight`** interface of the [CSS Custom Highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) is used to represent a collection of {{domxref("Range")}} instances to be styled using the API.
+The **`Highlight`** interface of the [CSS Custom Highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) is used to represent a collection of {{domxref("AbstractRange")}} instances to be styled using the API.
 
-To style arbitrary ranges in a page, instantiate a new `Highlight` object, add one or more `Range` objects to it, and register it using the {{domxref("HighlightRegistry")}}.
+To style arbitrary ranges in a page, instantiate a new `Highlight` object, add one or more `AbstractRange` objects to it, and register it using the {{domxref("HighlightRegistry")}}.
 
-A `Highlight` instance is a [`Set`-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) that can hold one or more `Range` objects.
+A `Highlight` instance is a [`Set`-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) that can hold one or more `AbstractRange` objects.
 
 {{InheritanceDiagram}}
 
diff --git a/files/en-us/web/api/highlight/keys/index.md b/files/en-us/web/api/highlight/keys/index.md
@@ -25,7 +25,7 @@ None.
 
 ### Return value
 
-A new iterator object containing each `Range` object in the given `Highlight`, in insertion order.
+A new iterator object containing each `AbstractRange` object in the given `Highlight`, in insertion order.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/highlight/priority/index.md b/files/en-us/web/api/highlight/priority/index.md
@@ -10,7 +10,7 @@ browser-compat: api.Highlight.priority
 
 The `priority` property of the {{domxref("Highlight")}} interface is a number used to determine which highlight's styles should be used to resolve style conflicts in overlapping parts. Highlights with a higher `priority` number have preference over those with a lower `priority`.
 
-It is possible to create {{domxref("Range")}} objects that overlap in a document.
+It is possible to create {{domxref("AbstractRange")}} objects that overlap in a document.
 
 When overlapping ranges are used by multiple different {{domxref("Highlight")}} objects, and when those highlights are styled using {{cssxref("::highlight")}} pseudo-elements, this may lead to conflicting styles.
 
diff --git a/files/en-us/web/api/highlight/size/index.md b/files/en-us/web/api/highlight/size/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-get-set.
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`size`** property returns the number of {{domxref("Range")}} objects in a
+The **`size`** property returns the number of {{domxref("AbstractRange")}} objects in a
 {{domxref("Highlight")}} object.
 
 ## Value
diff --git a/files/en-us/web/api/highlight/values/index.md b/files/en-us/web/api/highlight/values/index.md
@@ -9,7 +9,7 @@ spec-urls: https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set.prot
 
 {{APIRef("CSS Custom Highlight API")}}
 
-The **`values()`** method of the {{domxref("Highlight")}} interface returns a new [Iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators) object that contains the values for each `Range` object in the `Highlight` object in insertion order.
+The **`values()`** method of the {{domxref("Highlight")}} interface returns a new [Iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators) object that contains the values for each `AbstractRange` object in the `Highlight` object in insertion order.
 
 > [!NOTE]
 > The **`keys()`** method is an alias for this method. It behaves exactly the same and returns **values** of `Highlight` elements.
@@ -28,11 +28,11 @@ None.
 
 ### Return value
 
-A new iterator object containing each `Range` object in the given `Highlight`, in insertion order.
+A new iterator object containing each `AbstractRange` object in the given `Highlight`, in insertion order.
 
 ## Examples
 
-The following code snippet shows how to create a new `Highlight` object with three `Range` objects, and use the iterator returned by the `values()` method to log the three ranges:
+The following code snippet shows how to create a new `Highlight` object with three `AbstractRange` objects, and use the iterator returned by the `values()` method to log the three ranges:
 
 ```js
 const myHighlight = new Highlight();
diff --git a/files/en-us/web/css/guides/custom_highlight_api/index.md b/files/en-us/web/css/guides/custom_highlight_api/index.md
@@ -91,9 +91,10 @@ This module adds properties and methods to interfaces defined in other specifica
 - {{CSSXref("::selection")}}
 - {{CSSXref("::spelling-error")}}
 - {{CSSXref("::target-text")}}
-- {{domxref("Range")}} Interface and {{domxref("Range.range", "Range()")}} constructor
+- {{domxref("AbstractRange")}} interface
+- {{domxref("Range")}} interface and {{domxref("Range.range", "Range()")}} constructor
 - [Text fragments](/en-US/docs/Web/URI/Reference/Fragment/Text_fragments)
-- {{domxref("FragmentDirective")}} Interface
+- {{domxref("FragmentDirective")}} interface
 
 ## Specifications
 
diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_highlight/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_highlight/index.md
@@ -8,7 +8,7 @@ sidebar: cssref
 
 The **`::highlight()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) applies styles to a custom highlight.
 
-A custom highlight is a collection of {{domxref("Range")}} objects and is registered on a webpage using the {{domxref("HighlightRegistry")}}.
+A custom highlight is a collection of {{domxref("AbstractRange")}} objects and is registered on a webpage using the {{domxref("HighlightRegistry")}}.
 
 The `::highlight()` pseudo-element follows a special inheritance model common to all highlight pseudo-elements. For more details on how this inheritance works, see the [Highlight pseudo-elements inheritance](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements#highlight_pseudo-elements_inheritance) section.
 
