EDIT: After a hard refresh Firefox seems to work.

EDIT 2: Example works on Firefox but not Chrome (or other webkit browsers Opera/Edge) Webkit Bug?

How do I arrange the following CSS so that I can style the Web-Component bit exposed by "part=" so that the browser specific CSS pseudo-element selector is evaluated true as well?

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}&percnt; applied</span>
                        <span slot="highWater" style="color: black;">Maximum</span>
                    </abc-slider>