I always thought that the semantically appropriate way to represent a rating (e.g. a star rating) is a
<meter> element. They essentially convey the same type of information, the star rating is just a different presentation.
However, trying to style a
<meter> element to look like a star rating is …tricky at best. Not to mention that this approach won’t even work in Shadow trees (unless you include the CSS in every single shadow tree).
So, I set out to create a proper web component for star ratings. The first conundrum was, how does this relate to a
- Option 1: Should it extend
<meter>using builtin extends?
- Option 2: Should it use a web component with a
<meter>in Shadow DOM?
- Option 3: Should it be an entirely separate web component that just uses a
meterARIA Role and related ARIA attributes?