User: Custom Elements



  • How do you create a user element with a worker?

    Like I want to add it.

     <my-timer>0</my-timer>
    

    HTML worked for a second.

    How can this be realized? 'Cause in the angular.js, that's how my directives work. Thank you.



  • This is done by document.registerElement and object.create(HTMLElement.prototype)

    <script>
        var MyTimerProto = Object.create(HTMLElement.prototype);
    
    MyTimerProto.tick = function() {
        this.timer++;
        this.innerHTML = this.timer;
    };
    
    MyTimerProto.createdCallback = function() {
        this.timer = 0;
    };
    
    MyTimerProto.attachedCallback = function() {
        setInterval(this.tick.bind(this), 1000);
    };
    
    document.registerElement("my-timer", {
        prototype: MyTimerProto
    });
    

    </script>

    <my-timer id="timer">0</my-timer>

    https://learn.javascript.ru/webcomponent-core




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2