Problem
If a book has more than 4.5 stars, the 5th star should be half orange/gold, but it is empty.
Self-Diagnosed cause (might be a side effect of separate "fix")
If a book has more than 4.5 stars, the 5th star gets applied a CSS class called "_half", that sets the fill property of the svg to:
fill: url(#starHalf);
This fill (The "#starHalf" is a separately defined linearGradient) does not get applied, because the svg gets rendered via "use" tag, that creates a shadow DOM copy of a previously defined symbol. This shadow DOM copy of the svg inherits this starHalf "fill", but is overridden by a "fill" on the symbol itself:
fill: currentColor;
This "fill" on the symbol was probably written to create a way to set the "fill" of the shadow DOM copy via the "color" property. Because setting the "color" property on a parent sets the currentColor property on child nodes, even through shadow DOM. But the color property can only have a color, not a gradient, so this does not work for the half stars, only for the full stars.
Partial Fix
To allow the setting of fill from outside the shadow DOM, you need to set the fill property on the "i-star" symbol to "inherit", instead of "currentColor".
#i-star > path {
fill: inherit;
}
This way the fill from the shadow host svg gets inherited properly. Be aware that this might break other locations where the "i-star" symbol gets used.
Full solution
Funnily enough, the above "fix" actually still allows the full stars to render correctly, because the symbol tag inherits the "fill: currentColor" from the parent svg. This "fill: currentColor" gets set via the set of the color property on full stars, that then override the "fill: inherit" on the path element. But this is really unstable behavior. So the best bet is to just use proper fill inheritance on full stars too, like so.
(Seetting "fill" to inherit on both the symbol and the path within)
#i-star, #i-star >path {
fill: inherit;
}
And then change this:
.g_star ._on {
color: #ff8d29;
}
to this:
.g_star ._on {
fill: #ff8d29;
}
Caveat
There are plenty of other locations where the "fill: currentColor" way of inheritance is used. Maybe I'm unaware of a complicating factor, but setting fill simply to "inherit" seems like a cleaner solution, that also allows for all actual values of fill, like gradients.
PS: Your Anti-Debugging with constant "debugger" evals and console.clears() are pretty annoying.