Sometimes the simplest approach works best. A number of registered web components aim to handle the simple task of showing or soliciting a star rating from a user using the now-convential set of 5 stars. On its own, a 5-star rating system can present serious issues, as users tend to offer responses only at the extremes, but when managed well (adding users to add comments to explain their response, etc.), such rating systems can be useful.

We tried three star rating components:

• rating-element. We set aside this one aside when we found that it relies on an image sprite; in this age of responsive design, using an image sprite feels a bit antiquated.
• polymer-star-rating. This is the most full-featured of the three components we looked at: in particular, it's the only one that lets you can use different symbols for each rating, instead of always using a star. We had some difficulties getting the component to work in a demo of our own. (We filed a bug.) There were some other confusing points as well: the package name (polymer- star-rating) doesn't match the element name (star-rating), and the component made assumptions about the location of dependencies like polymer.html that didn't match up with how we'd set up things. Still, we have high hopes for this component.
• x-rating. This is the simplest component of the lot, but it worked immediately and did what we wanted. It uses Unicode code glyphs for the stars, which has the advantage of picking up the current text color. The glyph unfortunately isn't a parameter you can change, but that's nevertheless fine for the many cases in which you might want to just use a standard star.

Obviously, with any head-to-head comparison like this, it's hard to say which component is really "best" for everyone. But for our quick experiment, we found x-rating did the job simply and well, so that's the component we're showing in the accompanying demo. Nice work, hershmire!

View x-rating on GitHub

Tweet

« Blog home