EDITAR: después de una actualización completa, Firefox parece funcionar.
EDIT 2: El ejemplo funciona en Firefox pero no en Chrome (u otros navegadores de webkit Opera/Edge) ¿Error de Webkit?
¿Cómo organizo el siguiente CSS para poder diseñar el bit del componente web expuesto por "part=" para que el selector de pseudoelemento CSS específico del navegador también se evalúe como verdadero?
abc-slider::part(slider) { background-color: yellow; } #interest::part(slider) { background-color: red; } #interest::part(slider)::-moz-range-track { background-color: white; } #interest::part(slider)::-webkit-slider-thumb { background-color: white; } <abc-slider id="interest" max="30" value="0" step="5" min="0" statusposition="bottom"> <span slot="lowWater" style="color: black;">We won't make money on this</span> <span slot="twixtWater" style="color: black; font-style: italic; ">Interest Rate of ${this.value}% applied</span> <span slot="highWater" style="color: black;">Maximum</span> </abc-slider>Error registrado con Chrome en monorraíl.
Si alguien más tiene el mismo problema o similar, mi solución es usar variables CSS. Si observa el ejemplo citado anteriormente, yo: -