JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<input type="range" is="star-rating" min="0" max="5" value="2" />

JavaScript

var proto = (function(){
  function F(){
    var self = this;
    this.stars = [];
    this.createdCallback = function(){
      var root = this.createShadowRoot();
      for(var i = this.min; i <= this.max; i++){
        var star = document.createElement('button');
        star.innerHTML = '★';
        root.appendChild(star);
        this.stars.push(star);
 
        // Klicks auf einen Stern setzen einen neuen Value
        (function(j){
          star.addEventListener('click', function(){
            self.value = j; // HIER CRASH VON CHROME
            console.log(self.value);
          });
        })(i);

      }
    };
  };
  F.prototype = HTMLInputElement.prototype;
  return new F();
})();

document.registerElement('star-rating', {
  extends: 'input',
  prototype: proto
});