How to animate html ::selection background-color?

Question

I'd like to animate the ::selection background-color with something similar to a hue-rotate animation. Since ::selection background property can only contain a color or a variable, I assume that a ::root variable containing a color should be animated somehow and I have no clue how to animate something that can't have a class.

Maybe there's an easy solution with JS which I probably overlook now.

Vanilla JS solution preferred

Answer 1

this works now in chrome and firefox, not in safari though:

let r = 0;
const loop = () => {
var html = document.getElementsByTagName("html")[0];
  html.style.setProperty("--changing", `hsla(${r}, 50%, 50%, 0.999)`);
  r++;
 
  requestAnimationFrame(loop);
};

requestAnimationFrame(loop);