Post

Most devs have had to build a star rating component from scratch at least once. Web Awesome ships it as one tag: <wa-rating> Half-stars, custom icons, accessible out of the box. Try it here: codepen.io/editor/team/...

0 reposts5 likes

Curious if you thought about inlining the SVGs (instead of `<wa-icon>`) and using `<use>` for all of the stars. For a server-rendered product search page where dozens of star ratings could appear, I think it saved a lot of bytes and runtime operations.

Missed a detail, I meant to say that *we* used <use> in our rating component. Yup, I know about the cache! Problem we had (when we used a similar icon web component) was that each rating was including 5 additional shadow roots and custom elements that needed to initialize.

When we were tracing some perf regressions (for a very sensitive page), this seemed like low-hanging fruit to optimize.