Estoy construyendo un componente web en Stencil. Lo he recortado al mínimo para demostrar mi problema.

 import { Component, h } from "@stencil/core"; @Component({ tag: "custom-slider", styleUrl: "custom-slider.scss", shadow: true, }) export class CustomSlider { render() { return ( <input type="range" min="0" max="100" step="1" /> ); } }

 input[type="range"] { -webkit-appearance: none; width: 100%; margin-top: 100px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 36px; width: 36px; background: #555; margin-top: -12px; } input[type="range"]:active::-webkit-slider-thumb { background: blue; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 12px; background: #ccc; } input[type="range"]:active::-webkit-slider-runnable-track { background: #ddd; }

Al arrastrar el pulgar, espero que sea azul, pero en el móvil no lo es. ¿Por qué?

Funciona bien en el escritorio y el mismo código funciona en este CodePen https://codepen.io/tobbe_lundberg/pen/zYzWoKv tanto para escritorio como para dispositivos móviles.

Estoy probando usando el emulador de dispositivo en Chrome.

¿Cómo puedo hacer que el estado activo funcione también en dispositivos móviles para mi componente web stenciljs?