如何将 CSS ::part() 选择器与浏览器特定的 ::-moz 或 ::-webkit 选择器结合起来
编辑：硬刷新后，Firefox 似乎可以正常工作。
编辑2： 示例适用于 Firefox，但不适用于 Chrome（或其他 webkit 浏览器 Opera/Edge） Webkit Bug？
如何安排以下 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}% applied</span>
<span slot="highWater" style="color: black;">Maximum</span>
</abc-slider>
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}% applied</span>
<span slot="highWater" style="color: black;">Maximum</span>
</abc-slider>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
记录了单轨列车上 Chrome 的bug。
如果其他人有相同/类似的问题，我的解决方法是使用 CSS 变量。如果您查看前面引用的示例，我： -
＃兴趣 {
--滑块拇指冷：#0cd；
操作
输入[type='范围']::-webkit-slider-thumb {
背景颜色：var(--slider-thumb-cold, #00bf00);
}
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: -
#interest {
--slider-thumb-cold: #0cd;
}
input[type='range']::-webkit-slider-thumb {
background-color: var(--slider-thumb-cold, #00bf00);
}