<custom-rating total="5" selected="1" class="parent">
</custom-rating>

.parent {
  display: flex;
  flex-dorection: row;
}
.child {
  width: 20px;
  height: 20px;

  border: 1px solid green;
  margin: 2px 2px;
}

.selected {
  background-color: red;
}

class Ratings extends HTMLElement {
  constructor() {
    super();
  }
  static get observedAttributes() {
    return ["total", "selected"];
  }
  get total() {
    return this.getAttribute("total");
  }
  get selected() {
    return this.getAttribute("selected");
  }
  addDivs(numberOfdivs) {
    var selected = this.selected;
    for (let i = 0; i < numberOfdivs; i++) {
      var innerdiv = document.createElement("div");
      this.appendChild(innerdiv);
      if (selected != 0) {
        innerdiv.classList.add("child");
        innerdiv.classList.add("selected");
        selected = selected - 1;
      } else {
        innerdiv.classList.add("child");
      }
    }
  }
  attributeChangedCallback(attrName, oldVal, newVal) {
    if (attrName == "total") {
      this.addDivs(newVal);
    }
  }
}
window.customElements.define("custom-rating", Ratings);