HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Star rating</title>
    <style>
      body { font: 16px/1.6 system-ui, sans-serif; margin: 2rem; }
    </style>
  </head>
  <body>
    <h1>Course reviews</h1>

<star-rating value="4">4 out of 5 from 128 reviews</star-rating>

<template id="star-rating-template">
      <style>
        :host { display: inline-flex; gap: .4rem; align-items: center; }
        .stars { color: #b7791f; letter-spacing: .1em; }
      </style>
      <span class="stars" aria-hidden="true"></span>
      <span><slot></slot></span>
    </template>

const value = Number(this.getAttribute("value")) || 0;
          this.shadowRoot.querySelector(".stars").textContent =
            "*".repeat(value).padEnd(5, ".");
        }
      });
    </script>
  </body>
</html>

Output

Rendered by your browser