How to combine CSS ::part() selector with browser specific ::-moz or ::-webkit selectors

Question

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>

Answer 1

Logged bug with Chrome on Monorail.

If anyone else has the same/similar problem, my work around is to use CSS variables. If you look at the previous quoted example, I: -

1. Do the generic selectors in the caller/mainline
   #interest { --slider-thumb-cold: #0cd; }
2. Do the vendor specific stuff in the Web Component input[type='range']::-webkit-slider-thumb { background-color: var(--slider-thumb-cold, #00bf00); }