A rating Web component

This is an example project showing how to build a rating Web component by using Stencil, a Web component compiler created by the Ionic Team. The project is described in the article Creating Web Components with Stencil.

The project defines a star rating component like the following:

It allows you to set your rating value, to capture the event of assigning a new rating value, and to programmatically access the current rating value.

To know more about the component and how it works, check out the article Creating Web Components with Stencil.

Using the component

Copy the content of dist/rating-stencil-component folder into a local folder named my-rating.

Create an HTML page in a local folder and put the script tags shown below in its head section:

<script type="module" src="my-rating/rating-stencil-component.esm.js"></script>
<script nomodule src="my-rating/rating-stencil-component.js"></script><script>

Now you can use the component in your HTML by inserting the tag <my-rating></my-rating>

The following are the attributes of my-rating element:

Attribute	Description	Default value
max-value	The maximum number of stars for the component	5
value	The rating value currently shown	0

You can also handle the ratingUpdated custom event, that is an event fired when the value of the component changes.

Exploring the project

To explore the component project, download it into your local folder and run:

npm install
npm start

To build the component for production, run:

npm run build

Check out our Stencil docs for more details.