如何将 CSS ::part() 选择器与浏览器特定的 ::-moz 或 ::-webkit 选择器结合起来

Question

编辑： 硬刷新后 Firefox 似乎可以工作了。

编辑 2： Example 适用于 Firefox 但不适用于 Chrome （或其他 webkit 浏览器 Opera/Edge) Webkit 错误？

如何安排以下 CSS 以便我可以设置由“part=”公开的 Web 组件位的样式，以便特定于浏览器的 CSS 伪元素选择器被评估为 true嗯？

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

在单轨列车上 bug Chrome。

如果其他人遇到 same/similar 问题，我的解决方法是使用 CSS 变量。如果您查看前面引用的示例，我：-

在 caller/mainline
中做泛型选择器＃兴趣 { --slider-thumb-cold: #0cd; }
在 Web 组件中执行特定于供应商的内容输入[类型='range']::-webkit-slider-thumb { background-color: var(--slider-thumb-cold, #00bf00); }

如何将 CSS ::part() 选择器与浏览器特定的 ::-moz 或 ::-webkit 选择器结合起来

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

html

javascript

css

webkit

web-component