diff --git a/src/ol/render/VectorContext.js b/src/ol/render/VectorContext.js
index f4d477faf3..34a0803d45 100644
--- a/src/ol/render/VectorContext.js
+++ b/src/ol/render/VectorContext.js
@@ -15,8 +15,9 @@ class VectorContext {
    * @param {import("../geom/SimpleGeometry.js").default} geometry Geometry.
    * @param {import("../Feature.js").FeatureLike} feature Feature.
    * @param {Function} renderer Renderer.
+   * @param {Function} hitDetectionRenderer Renderer.
    */
-  drawCustom(geometry, feature, renderer) {}
+  drawCustom(geometry, feature, renderer, hitDetectionRenderer) {}
 
   /**
    * Render a geometry.
diff --git a/src/ol/render/canvas/Builder.js b/src/ol/render/canvas/Builder.js
index 9735410470..620b03f680 100644
--- a/src/ol/render/canvas/Builder.js
+++ b/src/ol/render/canvas/Builder.js
@@ -31,100 +31,100 @@ import {
 
 class CanvasBuilder extends VectorContext {
   /**
-   * @param {number} tolerance Tolerance.
-   * @param {import("../../extent.js").Extent} maxExtent Maximum extent.
-   * @param {number} resolution Resolution.
-   * @param {number} pixelRatio Pixel ratio.
-   */
+  * @param {number} tolerance Tolerance.
+  * @param {import("../../extent.js").Extent} maxExtent Maximum extent.
+  * @param {number} resolution Resolution.
+  * @param {number} pixelRatio Pixel ratio.
+  */
   constructor(tolerance, maxExtent, resolution, pixelRatio) {
     super();
 
     /**
-     * @protected
-     * @type {number}
-     */
+    * @protected
+    * @type {number}
+    */
     this.tolerance = tolerance;
 
     /**
-     * @protected
-     * @const
-     * @type {import("../../extent.js").Extent}
-     */
+    * @protected
+    * @const
+    * @type {import("../../extent.js").Extent}
+    */
     this.maxExtent = maxExtent;
 
     /**
-     * @protected
-     * @type {number}
-     */
+    * @protected
+    * @type {number}
+    */
     this.pixelRatio = pixelRatio;
 
     /**
-     * @protected
-     * @type {number}
-     */
+    * @protected
+    * @type {number}
+    */
     this.maxLineWidth = 0;
 
     /**
-     * @protected
-     * @const
-     * @type {number}
-     */
+    * @protected
+    * @const
+    * @type {number}
+    */
     this.resolution = resolution;
 
     /**
-     * @private
-     * @type {Array<*>}
-     */
+    * @private
+    * @type {Array<*>}
+    */
     this.beginGeometryInstruction1_ = null;
 
     /**
-     * @private
-     * @type {Array<*>}
-     */
+    * @private
+    * @type {Array<*>}
+    */
     this.beginGeometryInstruction2_ = null;
 
     /**
-     * @private
-     * @type {import("../../extent.js").Extent}
-     */
+    * @private
+    * @type {import("../../extent.js").Extent}
+    */
     this.bufferedMaxExtent_ = null;
 
     /**
-     * @protected
-     * @type {Array<*>}
-     */
+    * @protected
+    * @type {Array<*>}
+    */
     this.instructions = [];
 
     /**
-     * @protected
-     * @type {Array<number>}
-     */
+    * @protected
+    * @type {Array<number>}
+    */
     this.coordinates = [];
 
     /**
-     * @private
-     * @type {import("../../coordinate.js").Coordinate}
-     */
+    * @private
+    * @type {import("../../coordinate.js").Coordinate}
+    */
     this.tmpCoordinate_ = [];
 
     /**
-     * @protected
-     * @type {Array<*>}
-     */
+    * @protected
+    * @type {Array<*>}
+    */
     this.hitDetectionInstructions = [];
 
     /**
-     * @protected
-     * @type {import("../canvas.js").FillStrokeState}
-     */
+    * @protected
+    * @type {import("../canvas.js").FillStrokeState}
+    */
     this.state = /** @type {import("../canvas.js").FillStrokeState} */ ({});
   }
 
   /**
-   * @protected
-   * @param {Array<number>} dashArray Dash array.
-   * @return {Array<number>} Dash array with pixel ratio applied
-   */
+  * @protected
+  * @param {Array<number>} dashArray Dash array.
+  * @return {Array<number>} Dash array with pixel ratio applied
+  */
   applyPixelRatio(dashArray) {
     const pixelRatio = this.pixelRatio;
     return pixelRatio == 1
@@ -135,11 +135,11 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {Array<number>} flatCoordinates Flat coordinates.
-   * @param {number} stride Stride.
-   * @protected
-   * @return {number} My end
-   */
+  * @param {Array<number>} flatCoordinates Flat coordinates.
+  * @param {number} stride Stride.
+  * @protected
+  * @return {number} My end
+  */
   appendFlatPointCoordinates(flatCoordinates, stride) {
     const extent = this.getBufferedMaxExtent();
     const tmpCoord = this.tmpCoordinate_;
@@ -157,15 +157,15 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {Array<number>} flatCoordinates Flat coordinates.
-   * @param {number} offset Offset.
-   * @param {number} end End.
-   * @param {number} stride Stride.
-   * @param {boolean} closed Last input coordinate equals first.
-   * @param {boolean} skipFirst Skip first coordinate.
-   * @protected
-   * @return {number} My end.
-   */
+  * @param {Array<number>} flatCoordinates Flat coordinates.
+  * @param {number} offset Offset.
+  * @param {number} end End.
+  * @param {number} stride Stride.
+  * @param {boolean} closed Last input coordinate equals first.
+  * @param {boolean} skipFirst Skip first coordinate.
+  * @protected
+  * @return {number} My end.
+  */
   appendFlatLineCoordinates(
     flatCoordinates,
     offset,
@@ -219,13 +219,13 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {Array<number>} flatCoordinates Flat coordinates.
-   * @param {number} offset Offset.
-   * @param {Array<number>} ends Ends.
-   * @param {number} stride Stride.
-   * @param {Array<number>} builderEnds Builder ends.
-   * @return {number} Offset.
-   */
+  * @param {Array<number>} flatCoordinates Flat coordinates.
+  * @param {number} offset Offset.
+  * @param {Array<number>} ends Ends.
+  * @param {number} stride Stride.
+  * @param {Array<number>} builderEnds Builder ends.
+  * @return {number} Offset.
+  */
   drawCustomCoordinates_(flatCoordinates, offset, ends, stride, builderEnds) {
     for (let i = 0, ii = ends.length; i < ii; ++i) {
       const end = ends[i];
@@ -244,100 +244,106 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
-   * @param {import("../../Feature.js").FeatureLike} feature Feature.
-   * @param {Function} renderer Renderer.
-   */
-  drawCustom(geometry, feature, renderer) {
+  * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
+  * @param {import("../../Feature.js").FeatureLike} feature Feature.
+  * @param {Function} renderer Renderer.
+  * @param {Function} hitDetectionRenderer Renderer.
+  */
+  drawCustom(geometry, feature, renderer, hitDetectionRenderer) {
     this.beginGeometry(geometry, feature);
+
     const type = geometry.getType();
     const stride = geometry.getStride();
     const builderBegin = this.coordinates.length;
+    
     let flatCoordinates, builderEnd, builderEnds, builderEndss;
     let offset;
-    if (type == GeometryType.MULTI_POLYGON) {
-      flatCoordinates =
-        /** @type {import("../../geom/MultiPolygon.js").default} */ (
-          geometry
-        ).getOrientedFlatCoordinates();
-      builderEndss = [];
-      const endss =
-        /** @type {import("../../geom/MultiPolygon.js").default} */ (
-          geometry
-        ).getEndss();
-      offset = 0;
-      for (let i = 0, ii = endss.length; i < ii; ++i) {
-        const myEnds = [];
+    
+    switch(type) { 
+      case GeometryType.MULTI_POLYGON: 
+        flatCoordinates =
+          /** @type {import("../../geom/MultiPolygon.js").default} */ (
+            geometry
+          ).getOrientedFlatCoordinates();
+        builderEndss = [];
+        const endss =
+          /** @type {import("../../geom/MultiPolygon.js").default} */ (
+            geometry
+          ).getEndss();
+        offset = 0;
+        for (let i = 0, ii = endss.length; i < ii; ++i) {
+          const myEnds = [];
+          offset = this.drawCustomCoordinates_(
+            flatCoordinates,
+            offset,
+            endss[i],
+            stride,
+            myEnds
+          );
+          builderEndss.push(myEnds);
+        }
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEndss,
+          geometry,
+          renderer,
+          inflateMultiCoordinatesArray,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin, 
+          builderEndss, 
+          geometry, 
+          hitDetectionRenderer || renderer, 
+          inflateMultiCoordinatesArray]);
+        break;
+      case GeometryType.POLYGON:
+      case GeometryType.MULTI_LINE_STRING:
+        builderEnds = [];
+        flatCoordinates =
+          type == GeometryType.POLYGON
+            ? /** @type {import("../../geom/Polygon.js").default} */ (
+                geometry
+              ).getOrientedFlatCoordinates()
+            : geometry.getFlatCoordinates();
         offset = this.drawCustomCoordinates_(
           flatCoordinates,
-          offset,
-          endss[i],
+          0,
+          /** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
+            geometry
+          ).getEnds(),
           stride,
-          myEnds
+          builderEnds
+        );
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnds,
+          geometry,
+          renderer,
+          inflateCoordinatesArray,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin, 
+          builderEnds, 
+          geometry, 
+          hitDetectionRenderer || renderer, 
+          inflateCoordinatesArray
+        ]);
+        break;
+      case GeometryType.LINE_STRING:
+      case GeometryType.CIRCLE:
+        flatCoordinates = geometry.getFlatCoordinates();
+        builderEnd = this.appendFlatLineCoordinates(
+          flatCoordinates,
+          0,
+          flatCoordinates.length,
+          stride,
+          false,
+          false
         );
-        builderEndss.push(myEnds);
-      }
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEndss,
-        geometry,
-        renderer,
-        inflateMultiCoordinatesArray,
-      ]);
-    } else if (
-      type == GeometryType.POLYGON ||
-      type == GeometryType.MULTI_LINE_STRING
-    ) {
-      builderEnds = [];
-      flatCoordinates =
-        type == GeometryType.POLYGON
-          ? /** @type {import("../../geom/Polygon.js").default} */ (
-              geometry
-            ).getOrientedFlatCoordinates()
-          : geometry.getFlatCoordinates();
-      offset = this.drawCustomCoordinates_(
-        flatCoordinates,
-        0,
-        /** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
-          geometry
-        ).getEnds(),
-        stride,
-        builderEnds
-      );
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnds,
-        geometry,
-        renderer,
-        inflateCoordinatesArray,
-      ]);
-    } else if (
-      type == GeometryType.LINE_STRING ||
-      type == GeometryType.CIRCLE
-    ) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      builderEnd = this.appendFlatLineCoordinates(
-        flatCoordinates,
-        0,
-        flatCoordinates.length,
-        stride,
-        false,
-        false
-      );
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnd,
-        geometry,
-        renderer,
-        inflateCoordinates,
-      ]);
-    } else if (type == GeometryType.MULTI_POINT) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
-      if (builderEnd > builderBegin) {
         this.instructions.push([
           CanvasInstruction.CUSTOM,
           builderBegin,
@@ -346,27 +352,67 @@ class CanvasBuilder extends VectorContext {
           renderer,
           inflateCoordinates,
         ]);
-      }
-    } else if (type == GeometryType.POINT) {
-      flatCoordinates = geometry.getFlatCoordinates();
-      this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
-      builderEnd = this.coordinates.length;
-      this.instructions.push([
-        CanvasInstruction.CUSTOM,
-        builderBegin,
-        builderEnd,
-        geometry,
-        renderer,
-      ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          hitDetectionRenderer || renderer,
+          inflateCoordinates,
+        ]);
+        break;
+      case GeometryType.MULTI_POINT:
+        flatCoordinates = geometry.getFlatCoordinates();
+        builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
+        
+        if (builderEnd > builderBegin) {
+          this.instructions.push([
+            CanvasInstruction.CUSTOM,
+            builderBegin,
+            builderEnd,
+            geometry,
+            renderer,
+            inflateCoordinates,
+          ]);
+          this.hitDetectionInstructions.push([
+            CanvasInstruction.CUSTOM,
+            builderBegin,
+            builderEnd,
+            geometry,
+            hitDetectionRenderer || renderer,
+            inflateCoordinates,
+          ]);
+        }
+        break;
+      case type == GeometryType.POINT:
+        flatCoordinates = geometry.getFlatCoordinates();
+        this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
+        builderEnd = this.coordinates.length;
+        
+        this.instructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          renderer,
+        ]);
+        this.hitDetectionInstructions.push([
+          CanvasInstruction.CUSTOM,
+          builderBegin,
+          builderEnd,
+          geometry,
+          hitDetectionRenderer || renderer,
+        ]);
+        break;
     }
     this.endGeometry(feature);
   }
 
   /**
-   * @protected
-   * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry.
-   * @param {import("../../Feature.js").FeatureLike} feature Feature.
-   */
+  * @protected
+  * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry.
+  * @param {import("../../Feature.js").FeatureLike} feature Feature.
+  */
   beginGeometry(geometry, feature) {
     this.beginGeometryInstruction1_ = [
       CanvasInstruction.BEGIN_GEOMETRY,
@@ -385,8 +431,8 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @return {import("../canvas.js").SerializableInstructions} the serializable instructions.
-   */
+  * @return {import("../canvas.js").SerializableInstructions} the serializable instructions.
+  */
   finish() {
     return {
       instructions: this.instructions,
@@ -396,8 +442,8 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * Reverse the hit detection instructions.
-   */
+  * Reverse the hit detection instructions.
+  */
   reverseHitDetectionInstructions() {
     const hitDetectionInstructions = this.hitDetectionInstructions;
     // step 1 - reverse array
@@ -422,9 +468,9 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../../style/Fill.js").default} fillStyle Fill style.
-   * @param {import("../../style/Stroke.js").default} strokeStyle Stroke style.
-   */
+  * @param {import("../../style/Fill.js").default} fillStyle Fill style.
+  * @param {import("../../style/Stroke.js").default} strokeStyle Stroke style.
+  */
   setFillStrokeStyle(fillStyle, strokeStyle) {
     const state = this.state;
     if (fillStyle) {
@@ -482,9 +528,9 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../canvas.js").FillStrokeState} state State.
-   * @return {Array<*>} Fill instruction.
-   */
+  * @param {import("../canvas.js").FillStrokeState} state State.
+  * @return {Array<*>} Fill instruction.
+  */
   createFill(state) {
     const fillStyle = state.fillStyle;
     /** @type {Array<*>} */
@@ -497,16 +543,16 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../canvas.js").FillStrokeState} state State.
-   */
+  * @param {import("../canvas.js").FillStrokeState} state State.
+  */
   applyStroke(state) {
     this.instructions.push(this.createStroke(state));
   }
 
   /**
-   * @param {import("../canvas.js").FillStrokeState} state State.
-   * @return {Array<*>} Stroke instruction.
-   */
+  * @param {import("../canvas.js").FillStrokeState} state State.
+  * @return {Array<*>} Stroke instruction.
+  */
   createStroke(state) {
     return [
       CanvasInstruction.SET_STROKE_STYLE,
@@ -521,9 +567,9 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../canvas.js").FillStrokeState} state State.
-   * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState):Array<*>} createFill Create fill.
-   */
+  * @param {import("../canvas.js").FillStrokeState} state State.
+  * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState):Array<*>} createFill Create fill.
+  */
   updateFillStyle(state, createFill) {
     const fillStyle = state.fillStyle;
     if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) {
@@ -535,9 +581,9 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../canvas.js").FillStrokeState} state State.
-   * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState): void} applyStroke Apply stroke.
-   */
+  * @param {import("../canvas.js").FillStrokeState} state State.
+  * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState): void} applyStroke Apply stroke.
+  */
   updateStrokeStyle(state, applyStroke) {
     const strokeStyle = state.strokeStyle;
     const lineCap = state.lineCap;
@@ -570,8 +616,8 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * @param {import("../../Feature.js").FeatureLike} feature Feature.
-   */
+  * @param {import("../../Feature.js").FeatureLike} feature Feature.
+  */
   endGeometry(feature) {
     this.beginGeometryInstruction1_[2] = this.instructions.length;
     this.beginGeometryInstruction1_ = null;
@@ -583,12 +629,12 @@ class CanvasBuilder extends VectorContext {
   }
 
   /**
-   * Get the buffered rendering extent.  Rendering will be clipped to the extent
-   * provided to the constructor.  To account for symbolizers that may intersect
-   * this extent, we calculate a buffered extent (e.g. based on stroke width).
-   * @return {import("../../extent.js").Extent} The buffered rendering extent.
-   * @protected
-   */
+  * Get the buffered rendering extent.  Rendering will be clipped to the extent
+  * provided to the constructor.  To account for symbolizers that may intersect
+  * this extent, we calculate a buffered extent (e.g. based on stroke width).
+  * @return {import("../../extent.js").Extent} The buffered rendering extent.
+  * @protected
+  */
   getBufferedMaxExtent() {
     if (!this.bufferedMaxExtent_) {
       this.bufferedMaxExtent_ = clone(this.maxExtent);
diff --git a/src/ol/renderer/vector.js b/src/ol/renderer/vector.js
index 32d2e99ba7..3193bd5b05 100644
--- a/src/ol/renderer/vector.js
+++ b/src/ol/renderer/vector.js
@@ -208,7 +208,8 @@ function renderGeometry(replayGroup, geometry, style, feature) {
   replay.drawCustom(
     /** @type {import("../geom/SimpleGeometry.js").default} */ (geometry),
     feature,
-    style.getRenderer()
+    style.getRenderer(),
+    style.getHitDetectionRenderer()
   );
 }
 
diff --git a/src/ol/style/Style.js b/src/ol/style/Style.js
index 2dc137c6c1..6694631de9 100644
--- a/src/ol/style/Style.js
+++ b/src/ol/style/Style.js
@@ -9,159 +9,161 @@ import Stroke from './Stroke.js';
 import {assert} from '../asserts.js';
 
 /**
- * A function that takes an {@link module:ol/Feature} and a `{number}`
- * representing the view's resolution. The function should return a
- * {@link module:ol/style/Style} or an array of them. This way e.g. a
- * vector layer can be styled. If the function returns `undefined`, the
- * feature will not be rendered.
- *
- * @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction
- */
+* A function that takes an {@link module:ol/Feature} and a `{number}`
+* representing the view's resolution. The function should return a
+* {@link module:ol/style/Style} or an array of them. This way e.g. a
+* vector layer can be styled. If the function returns `undefined`, the
+* feature will not be rendered.
+*
+* @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction
+*/
 
 /**
- * A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}.
- * @typedef {Style|Array<Style>|StyleFunction} StyleLike
- */
+* A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}.
+* @typedef {Style|Array<Style>|StyleFunction} StyleLike
+*/
 
 /**
- * A function that takes an {@link module:ol/Feature} as argument and returns an
- * {@link module:ol/geom/Geometry} that will be rendered and styled for the feature.
- *
- * @typedef {function(import("../Feature.js").FeatureLike):
- *     (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction
- */
+* A function that takes an {@link module:ol/Feature} as argument and returns an
+* {@link module:ol/geom/Geometry} that will be rendered and styled for the feature.
+*
+* @typedef {function(import("../Feature.js").FeatureLike):
+*     (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction
+*/
 
 /**
- * Custom renderer function. Takes two arguments:
- *
- * 1. The pixel coordinates of the geometry in GeoJSON notation.
- * 2. The {@link module:ol/render~State} of the layer renderer.
- *
- * @typedef {function((import("../coordinate.js").Coordinate|Array<import("../coordinate.js").Coordinate>|Array<Array<import("../coordinate.js").Coordinate>>),import("../render.js").State): void}
- * RenderFunction
- */
+* Custom renderer function. Takes two arguments:
+*
+* 1. The pixel coordinates of the geometry in GeoJSON notation.
+* 2. The {@link module:ol/render~State} of the layer renderer.
+*
+* @typedef {function((import("../coordinate.js").Coordinate|Array<import("../coordinate.js").Coordinate>|Array<Array<import("../coordinate.js").Coordinate>>),import("../render.js").State): void}
+* RenderFunction
+*/
 
 /**
- * @typedef {Object} Options
- * @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry
- * or function returning a geometry to render for this style.
- * @property {import("./Fill.js").default} [fill] Fill style.
- * @property {import("./Image.js").default} [image] Image style.
- * @property {RenderFunction} [renderer] Custom renderer. When configured, `fill`, `stroke` and `image` will be
- * ignored, and the provided function will be called with each render frame for each geometry.
- * @property {import("./Stroke.js").default} [stroke] Stroke style.
- * @property {import("./Text.js").default} [text] Text style.
- * @property {number} [zIndex] Z index.
- */
+* @typedef {Object} Options
+* @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry
+* or function returning a geometry to render for this style.
+* @property {import("./Fill.js").default} [fill] Fill style.
+* @property {import("./Image.js").default} [image] Image style.
+* @property {RenderFunction} [renderer] Custom renderer. When configured, `fill`, `stroke` and `image` will be
+* ignored, and the provided function will be called with each render frame for each geometry.
+* @property {RenderFunction} [hitDetectionRenderer] Custom renderer for hit detection. If provided will be used 
+* in hit detection rendering. 
+* @property {import("./Stroke.js").default} [stroke] Stroke style.
+* @property {import("./Text.js").default} [text] Text style.
+* @property {number} [zIndex] Z index.
+*/
 
 /**
- * @classdesc
- * Container for vector feature rendering styles. Any changes made to the style
- * or its children through `set*()` methods will not take effect until the
- * feature or layer that uses the style is re-rendered.
- *
- * ## Feature styles
- *
- * If no style is defined, the following default style is used:
- * ```js
- *  import {Fill, Stroke, Circle, Style} from 'ol/style';
- *
- *  var fill = new Fill({
- *    color: 'rgba(255,255,255,0.4)'
- *  });
- *  var stroke = new Stroke({
- *    color: '#3399CC',
- *    width: 1.25
- *  });
- *  var styles = [
- *    new Style({
- *      image: new Circle({
- *        fill: fill,
- *        stroke: stroke,
- *        radius: 5
- *      }),
- *      fill: fill,
- *      stroke: stroke
- *    })
- *  ];
- * ```
- *
- * A separate editing style has the following defaults:
- * ```js
- *  import {Fill, Stroke, Circle, Style} from 'ol/style';
- *  import GeometryType from 'ol/geom/GeometryType';
- *
- *  var white = [255, 255, 255, 1];
- *  var blue = [0, 153, 255, 1];
- *  var width = 3;
- *  styles[GeometryType.POLYGON] = [
- *    new Style({
- *      fill: new Fill({
- *        color: [255, 255, 255, 0.5]
- *      })
- *    })
- *  ];
- *  styles[GeometryType.MULTI_POLYGON] =
- *      styles[GeometryType.POLYGON];
- *  styles[GeometryType.LINE_STRING] = [
- *    new Style({
- *      stroke: new Stroke({
- *        color: white,
- *        width: width + 2
- *      })
- *    }),
- *    new Style({
- *      stroke: new Stroke({
- *        color: blue,
- *        width: width
- *      })
- *    })
- *  ];
- *  styles[GeometryType.MULTI_LINE_STRING] =
- *      styles[GeometryType.LINE_STRING];
- *  styles[GeometryType.POINT] = [
- *    new Style({
- *      image: new Circle({
- *        radius: width * 2,
- *        fill: new Fill({
- *          color: blue
- *        }),
- *        stroke: new Stroke({
- *          color: white,
- *          width: width / 2
- *        })
- *      }),
- *      zIndex: Infinity
- *    })
- *  ];
- *  styles[GeometryType.MULTI_POINT] =
- *      styles[GeometryType.POINT];
- *  styles[GeometryType.GEOMETRY_COLLECTION] =
- *      styles[GeometryType.POLYGON].concat(
- *          styles[GeometryType.LINE_STRING],
- *          styles[GeometryType.POINT]
- *      );
- * ```
- *
- * @api
- */
+* @classdesc
+* Container for vector feature rendering styles. Any changes made to the style
+* or its children through `set*()` methods will not take effect until the
+* feature or layer that uses the style is re-rendered.
+*
+* ## Feature styles
+*
+* If no style is defined, the following default style is used:
+* ```js
+*  import {Fill, Stroke, Circle, Style} from 'ol/style';
+*
+*  var fill = new Fill({
+*    color: 'rgba(255,255,255,0.4)'
+*  });
+*  var stroke = new Stroke({
+*    color: '#3399CC',
+*    width: 1.25
+*  });
+*  var styles = [
+*    new Style({
+*      image: new Circle({
+*        fill: fill,
+*        stroke: stroke,
+*        radius: 5
+*      }),
+*      fill: fill,
+*      stroke: stroke
+*    })
+*  ];
+* ```
+*
+* A separate editing style has the following defaults:
+* ```js
+*  import {Fill, Stroke, Circle, Style} from 'ol/style';
+*  import GeometryType from 'ol/geom/GeometryType';
+*
+*  var white = [255, 255, 255, 1];
+*  var blue = [0, 153, 255, 1];
+*  var width = 3;
+*  styles[GeometryType.POLYGON] = [
+*    new Style({
+*      fill: new Fill({
+*        color: [255, 255, 255, 0.5]
+*      })
+*    })
+*  ];
+*  styles[GeometryType.MULTI_POLYGON] =
+*      styles[GeometryType.POLYGON];
+*  styles[GeometryType.LINE_STRING] = [
+*    new Style({
+*      stroke: new Stroke({
+*        color: white,
+*        width: width + 2
+*      })
+*    }),
+*    new Style({
+*      stroke: new Stroke({
+*        color: blue,
+*        width: width
+*      })
+*    })
+*  ];
+*  styles[GeometryType.MULTI_LINE_STRING] =
+*      styles[GeometryType.LINE_STRING];
+*  styles[GeometryType.POINT] = [
+*    new Style({
+*      image: new Circle({
+*        radius: width * 2,
+*        fill: new Fill({
+*          color: blue
+*        }),
+*        stroke: new Stroke({
+*          color: white,
+*          width: width / 2
+*        })
+*      }),
+*      zIndex: Infinity
+*    })
+*  ];
+*  styles[GeometryType.MULTI_POINT] =
+*      styles[GeometryType.POINT];
+*  styles[GeometryType.GEOMETRY_COLLECTION] =
+*      styles[GeometryType.POLYGON].concat(
+*          styles[GeometryType.LINE_STRING],
+*          styles[GeometryType.POINT]
+*      );
+* ```
+*
+* @api
+*/
 class Style {
   /**
-   * @param {Options} [opt_options] Style options.
-   */
+  * @param {Options} [opt_options] Style options.
+  */
   constructor(opt_options) {
     const options = opt_options || {};
 
     /**
-     * @private
-     * @type {string|import("../geom/Geometry.js").default|GeometryFunction}
-     */
+    * @private
+    * @type {string|import("../geom/Geometry.js").default|GeometryFunction}
+    */
     this.geometry_ = null;
 
     /**
-     * @private
-     * @type {!GeometryFunction}
-     */
+    * @private
+    * @type {!GeometryFunction}
+    */
     this.geometryFunction_ = defaultGeometryFunction;
 
     if (options.geometry !== undefined) {
@@ -169,47 +171,53 @@ class Style {
     }
 
     /**
-     * @private
-     * @type {import("./Fill.js").default}
-     */
+    * @private
+    * @type {import("./Fill.js").default}
+    */
     this.fill_ = options.fill !== undefined ? options.fill : null;
 
     /**
-     * @private
-     * @type {import("./Image.js").default}
-     */
+    * @private
+    * @type {import("./Image.js").default}
+    */
     this.image_ = options.image !== undefined ? options.image : null;
 
     /**
-     * @private
-     * @type {RenderFunction|null}
-     */
+    * @private
+    * @type {RenderFunction|null}
+    */
     this.renderer_ = options.renderer !== undefined ? options.renderer : null;
 
     /**
-     * @private
-     * @type {import("./Stroke.js").default}
-     */
+    * @private
+    * @type {RenderFunction|null}
+    */
+    this.hitDetectionRenderer_ = options.hitDetectionRenderer !== undefined ? options.hitDetectionRenderer : null;
+
+    /**
+    * @private
+    * @type {import("./Stroke.js").default}
+    */
     this.stroke_ = options.stroke !== undefined ? options.stroke : null;
 
     /**
-     * @private
-     * @type {import("./Text.js").default}
-     */
+    * @private
+    * @type {import("./Text.js").default}
+    */
     this.text_ = options.text !== undefined ? options.text : null;
 
     /**
-     * @private
-     * @type {number|undefined}
-     */
+    * @private
+    * @type {number|undefined}
+    */
     this.zIndex_ = options.zIndex;
   }
 
   /**
-   * Clones the style.
-   * @return {Style} The cloned style.
-   * @api
-   */
+  * Clones the style.
+  * @return {Style} The cloned style.
+  * @api
+  */
   clone() {
     let geometry = this.getGeometry();
     if (geometry && typeof geometry === 'object') {
@@ -229,135 +237,156 @@ class Style {
   }
 
   /**
-   * Get the custom renderer function that was configured with
-   * {@link #setRenderer} or the `renderer` constructor option.
-   * @return {RenderFunction|null} Custom renderer function.
-   * @api
-   */
+  * Get the custom renderer function that was configured with
+  * {@link #setRenderer} or the `renderer` constructor option.
+  * @return {RenderFunction|null} Custom renderer function.
+  * @api
+  */
   getRenderer() {
     return this.renderer_;
   }
 
   /**
-   * Sets a custom renderer function for this style. When set, `fill`, `stroke`
-   * and `image` options of the style will be ignored.
-   * @param {RenderFunction|null} renderer Custom renderer function.
-   * @api
-   */
+  * Sets a custom renderer function for this style. When set, `fill`, `stroke`
+  * and `image` options of the style will be ignored.
+  * @param {RenderFunction|null} renderer Custom renderer function.
+  * @api
+  */
   setRenderer(renderer) {
     this.renderer_ = renderer;
   }
 
+
   /**
-   * Get the geometry to be rendered.
-   * @return {string|import("../geom/Geometry.js").default|GeometryFunction}
-   * Feature property or geometry or function that returns the geometry that will
-   * be rendered with this style.
-   * @api
-   */
+  * Sets a custom renderer function for this style used
+  * in hit detection.
+  * @param {RenderFunction|null} renderer Custom renderer function.
+  * @api
+  */
+  setHitDetectionRenderer(renderer) {
+    this.hitDetectionRenderer_ = renderer;
+  }
+
+  /**
+  * Get the custom renderer function that was configured with
+  * {@link #setHitDetectionRenderer} or the `hitDetectionRenderer` constructor option.
+  * @return {RenderFunction|null} Custom renderer function.
+  * @api
+  */
+  getHitDetectionRenderer() {
+    return this.hitDetectionRenderer_;
+  }
+
+  /**
+  * Get the geometry to be rendered.
+  * @return {string|import("../geom/Geometry.js").default|GeometryFunction}
+  * Feature property or geometry or function that returns the geometry that will
+  * be rendered with this style.
+  * @api
+  */
   getGeometry() {
     return this.geometry_;
   }
 
   /**
-   * Get the function used to generate a geometry for rendering.
-   * @return {!GeometryFunction} Function that is called with a feature
-   * and returns the geometry to render instead of the feature's geometry.
-   * @api
-   */
+  * Get the function used to generate a geometry for rendering.
+  * @return {!GeometryFunction} Function that is called with a feature
+  * and returns the geometry to render instead of the feature's geometry.
+  * @api
+  */
   getGeometryFunction() {
     return this.geometryFunction_;
   }
 
   /**
-   * Get the fill style.
-   * @return {import("./Fill.js").default} Fill style.
-   * @api
-   */
+  * Get the fill style.
+  * @return {import("./Fill.js").default} Fill style.
+  * @api
+  */
   getFill() {
     return this.fill_;
   }
 
   /**
-   * Set the fill style.
-   * @param {import("./Fill.js").default} fill Fill style.
-   * @api
-   */
+  * Set the fill style.
+  * @param {import("./Fill.js").default} fill Fill style.
+  * @api
+  */
   setFill(fill) {
     this.fill_ = fill;
   }
 
   /**
-   * Get the image style.
-   * @return {import("./Image.js").default} Image style.
-   * @api
-   */
+  * Get the image style.
+  * @return {import("./Image.js").default} Image style.
+  * @api
+  */
   getImage() {
     return this.image_;
   }
 
   /**
-   * Set the image style.
-   * @param {import("./Image.js").default} image Image style.
-   * @api
-   */
+  * Set the image style.
+  * @param {import("./Image.js").default} image Image style.
+  * @api
+  */
   setImage(image) {
     this.image_ = image;
   }
 
   /**
-   * Get the stroke style.
-   * @return {import("./Stroke.js").default} Stroke style.
-   * @api
-   */
+  * Get the stroke style.
+  * @return {import("./Stroke.js").default} Stroke style.
+  * @api
+  */
   getStroke() {
     return this.stroke_;
   }
 
   /**
-   * Set the stroke style.
-   * @param {import("./Stroke.js").default} stroke Stroke style.
-   * @api
-   */
+  * Set the stroke style.
+  * @param {import("./Stroke.js").default} stroke Stroke style.
+  * @api
+  */
   setStroke(stroke) {
     this.stroke_ = stroke;
   }
 
   /**
-   * Get the text style.
-   * @return {import("./Text.js").default} Text style.
-   * @api
-   */
+  * Get the text style.
+  * @return {import("./Text.js").default} Text style.
+  * @api
+  */
   getText() {
     return this.text_;
   }
 
   /**
-   * Set the text style.
-   * @param {import("./Text.js").default} text Text style.
-   * @api
-   */
+  * Set the text style.
+  * @param {import("./Text.js").default} text Text style.
+  * @api
+  */
   setText(text) {
     this.text_ = text;
   }
 
   /**
-   * Get the z-index for the style.
-   * @return {number|undefined} ZIndex.
-   * @api
-   */
+  * Get the z-index for the style.
+  * @return {number|undefined} ZIndex.
+  * @api
+  */
   getZIndex() {
     return this.zIndex_;
   }
 
   /**
-   * Set a geometry that is rendered instead of the feature's geometry.
-   *
-   * @param {string|import("../geom/Geometry.js").default|GeometryFunction} geometry
-   *     Feature property or geometry or function returning a geometry to render
-   *     for this style.
-   * @api
-   */
+  * Set a geometry that is rendered instead of the feature's geometry.
+  *
+  * @param {string|import("../geom/Geometry.js").default|GeometryFunction} geometry
+  *     Feature property or geometry or function returning a geometry to render
+  *     for this style.
+  * @api
+  */
   setGeometry(geometry) {
     if (typeof geometry === 'function') {
       this.geometryFunction_ = geometry;
@@ -378,24 +407,24 @@ class Style {
   }
 
   /**
-   * Set the z-index.
-   *
-   * @param {number|undefined} zIndex ZIndex.
-   * @api
-   */
+  * Set the z-index.
+  *
+  * @param {number|undefined} zIndex ZIndex.
+  * @api
+  */
   setZIndex(zIndex) {
     this.zIndex_ = zIndex;
   }
 }
 
 /**
- * Convert the provided object into a style function.  Functions passed through
- * unchanged.  Arrays of Style or single style objects wrapped in a
- * new style function.
- * @param {StyleFunction|Array<Style>|Style} obj
- *     A style function, a single style, or an array of styles.
- * @return {StyleFunction} A style function.
- */
+* Convert the provided object into a style function.  Functions passed through
+* unchanged.  Arrays of Style or single style objects wrapped in a
+* new style function.
+* @param {StyleFunction|Array<Style>|Style} obj
+*     A style function, a single style, or an array of styles.
+* @return {StyleFunction} A style function.
+*/
 export function toFunction(obj) {
   let styleFunction;
 
@@ -403,8 +432,8 @@ export function toFunction(obj) {
     styleFunction = obj;
   } else {
     /**
-     * @type {Array<Style>}
-     */
+    * @type {Array<Style>}
+    */
     let styles;
     if (Array.isArray(obj)) {
       styles = obj;
@@ -421,15 +450,15 @@ export function toFunction(obj) {
 }
 
 /**
- * @type {Array<Style>}
- */
+* @type {Array<Style>}
+*/
 let defaultStyles = null;
 
 /**
- * @param {import("../Feature.js").FeatureLike} feature Feature.
- * @param {number} resolution Resolution.
- * @return {Array<Style>} Style.
- */
+* @param {import("../Feature.js").FeatureLike} feature Feature.
+* @param {number} resolution Resolution.
+* @return {Array<Style>} Style.
+*/
 export function createDefaultStyle(feature, resolution) {
   // We don't use an immediately-invoked function
   // and a closure so we don't get an error at script evaluation time in
@@ -460,9 +489,9 @@ export function createDefaultStyle(feature, resolution) {
 }
 
 /**
- * Default styles for editing features.
- * @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
- */
+* Default styles for editing features.
+* @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
+*/
 export function createEditingStyle() {
   /** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
   const styles = {};
@@ -523,10 +552,10 @@ export function createEditingStyle() {
 }
 
 /**
- * Function that is called with a feature and returns its default geometry.
- * @param {import("../Feature.js").FeatureLike} feature Feature to get the geometry for.
- * @return {import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined} Geometry to render.
- */
+* Function that is called with a feature and returns its default geometry.
+* @param {import("../Feature.js").FeatureLike} feature Feature to get the geometry for.
+* @return {import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined} Geometry to render.
+*/
 function defaultGeometryFunction(feature) {
   return feature.getGeometry();
 }