one-star-rating

by WebComponents

HTML

<one-star-rating value=1></one-star-rating>
<one-star-rating value=2></one-star-rating>
<one-star-rating value=3></one-star-rating>
<one-star-rating value=4></one-star-rating>
<one-star-rating value=5></one-star-rating>

CSS

body {
  background: beige;
  display: flex;
  justify-content: center;
}

JavaScript

customElements.define(
    "one-star-rating",
    class extends HTMLElement {
      static get observedAttributes() {
        return ["value"];
      }
      attributeChangedCallback(name, oldValue, newValue) {
        this.shadowRoot.querySelector("input:nth-child(" + newValue + ")").checked = true;
      }
      constructor() {
        super().attachShadow({
            mode: "open",
          }).innerHTML =
          `<input type=radio name=rating value=1 />` +
          `<input type=radio name=rating value=2 />` +
          `<input type=radio name=rating value=3 />` +
          `<input type=radio name=rating value=4 />` +
          `<input type=radio name=rating value=5 />` +
          `<i></i>` +
          `<style>` +
          `:host{display:inline-grid;width:300px;aspect-ratio:1/1}` +
          `input{grid-area:1/1;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;clip-path:polygon(50% 0,calc(50% + 0.2245*50%) calc(0.691*50%),50% 50%,calc(50% - 0.2245*50%) calc(0.691*50%))}` +
          `input:nth-child(2){transform:rotate(72deg)}` +
          `input:nth-child(3){transform:rotate(144deg)}` +
          `input:nth-child(4){transform:rotate(216deg)}` +
          `input:nth-child(5){transform:rotate(288deg)}` +
          `i{grid-area:1/1;pointer-events:none;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%);background:conic-gradient(from -36deg,rgba(255,0,0,var(--o,0.3)) calc(var(--l,0)*72deg),#0000 0),conic-gradient(from -36deg,gold calc(var(--i,0)*72deg),#0000 0),#ccc}` +
          `:host:focus-within{filter:drop-shadow(0 0 2px #000)}` +
          `input:active~i{--o:1}` +
          `input:nth-child(1):checked~i{--i:1}` +
          `input:nth-child(2):checked~i{--i:2}` +
          `input:nth-child(3):checked~i{--i:3}` +
          `input:nth-child(4):checked~i{--i:4}` +
          `input:nth-child(5):checked~i{--i:5}` +
          `input:nth-child(1):hover~i{--l:1}` +
         ...