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/...

Rogin Farrer

@rogin.dev

17 Sept

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.

Cory LaViska

@cory.laviska.com

18 Sept

The icon is cached the first time its requested, so a dozen ratings won't load the icon from the server 12 times :)

Rogin Farrer

@rogin.dev

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.

18/9/26, 12:09 am0 reposts1 like

Rogin Farrer

@rogin.dev

18 Sept

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