This web component creates a configurable way of displaying a rating.
\r \r <wc-star-review>\r This web component creates a configurable way of displaying a rating.\r \r \r \r\n\r\nThis web component creates a configurable way of displaying a rating.\r\n\r\n[](https://www.webcomponents.org/element/@annoyingmouse/wc-star-review)\r\n\r\nDemo here: [https://wc-star-review.annoyingmouse.repl.co](https://wc-star-review.annoyingmouse.repl.co)\r\n\r\n## Installation\r\n```\r\n\r\n```\r\n\r\nAlternatively:\r\n\r\n```\r\n\r\n```\r\n\r\nYou can use it minified by adding using this instead:\r\n\r\n```\r\n\r\n```\r\n\r\nPlease remember to change `[WHATEVER CDN]` to your favourite CDN\r\n\r\n## Usage\r\n\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Configuration\r\n\r\nThe rating is provided using the `rating` attribute, it defaults to `0`.\r\n\r\nThe number of stars visible is controlled by the `total` attribute, it defaults to `5` (see the **Caution** below).\r\n\r\nThe number of reviews, if known, can be shown in brackets by providing a `reviews` attribute. The count is also included in the component's accessible label.\r\n\r\nThe colour of the stars can be changed from the default of `#FFC107` by adding a `colour` attribute (or `color` for the American spelling) with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.\r\n\r\nThe background behind the stars can be changed from the default of `#CCCCCC` by adding a `background` attribute with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.\r\n\r\n## Accessibility\r\n\r\nThe component automatically sets `role=\"img\"`, `tabindex=\"0\"`, and an `aria-label` on the host element. The label is generated from the current rating, total, and review count — for example: `\"100 reviews. Rated 4.50 out of 5 stars.\"`.\r\n\r\nAll three can be overridden by setting them directly on the element:\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Caution\r\n\r\nIncreasing the `total` to numbers above 5 is not advised, besides, 5 stars are commonly [used in eCommerce](https://uxplanet.org/how-to-design-user-rating-and-reviews-1b26c0208d3a)","readmeFilename":"README.md"}
\r \r \r\n\r\nThis web component creates a configurable way of displaying a rating.\r\n\r\n[](https://www.webcomponents.org/element/@annoyingmouse/wc-star-review)\r\n\r\nDemo here: [https://wc-star-review.annoyingmouse.repl.co](https://wc-star-review.annoyingmouse.repl.co)\r\n\r\n## Installation\r\n```\r\n\r\n```\r\n\r\nAlternatively:\r\n\r\n```\r\n\r\n```\r\n\r\nYou can use it minified by adding using this instead:\r\n\r\n```\r\n\r\n```\r\n\r\nPlease remember to change `[WHATEVER CDN]` to your favourite CDN\r\n\r\n## Usage\r\n\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Configuration\r\n\r\nThe rating is provided using the `rating` attribute, it defaults to `0`.\r\n\r\nThe number of stars visible is controlled by the `total` attribute, it defaults to `5` (see the **Caution** below).\r\n\r\nThe number of reviews, if known, can be shown in brackets by providing a `reviews` attribute. The count is also included in the component's accessible label.\r\n\r\nThe colour of the stars can be changed from the default of `#FFC107` by adding a `colour` attribute (or `color` for the American spelling) with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.\r\n\r\nThe background behind the stars can be changed from the default of `#CCCCCC` by adding a `background` attribute with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.\r\n\r\n## Accessibility\r\n\r\nThe component automatically sets `role=\"img\"`, `tabindex=\"0\"`, and an `aria-label` on the host element. The label is generated from the current rating, total, and review count — for example: `\"100 reviews. Rated 4.50 out of 5 stars.\"`.\r\n\r\nAll three can be overridden by setting them directly on the element:\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Caution\r\n\r\nIncreasing the `total` to numbers above 5 is not advised, besides, 5 stars are commonly [used in eCommerce](https://uxplanet.org/how-to-design-user-rating-and-reviews-1b26c0208d3a)","readmeFilename":"README.md"}