html CSS Selector over Circle element inside SVG inside Shadow DOM not working

q0qdq0h2 于 2023-09-28 发布在其他

关注(0)|答案(1)|浏览(104)

我有以下HTML：

我只是想添加stroke属性来改变进度环的颜色。这个圆圈是由第三方库生成的，我无法控制它。我已经尝试了四个小时不同的选择，但没有一个工作：

svg::part(indeterminate-indicator-1) {
    color: blue;
    opacity: 1;
}

slot[name='indeterminate'] {
    color: black !important;
    opacity: 1;
}

slot[name=indeterminate] {
    width: 400px;
    stroke: black !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

div > span > fluent-progress-ring[_bl_b6bfd787-f5d6-4b24-8906-74e2ca992e1c] > slot[name='indeterminate'] {
    width: 400px;
    stroke: black !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

你知道哪里出了问题吗？是否可以在阴影根中更改样式？
提前感谢！

Html

来源：https://stackoverflow.com/questions/77146191/css-selector-over-circle-element-inside-svg-inside-shadow-dom-not-working