vendredi 28 avril 2017

I can not implement "extended custom element" with a BUTTON tag

I have been learning about web components and I have the following code:

<input is="totally-not-checkbox"> 
<script>
    var protoInput = Object.create(HTMLInputElement.prototype);

    protoInput.createdCallback = function() {
        this.style.color = "orange";
    };

    var nCB = document.registerElement("totally-not-checkbox", {
        prototype: protoInput,
        extends: 'input'
    });
</script>

It is a simple implementation of "extended custom element", now I try to do the same but instead of using an INPUT I use a BUTTON:

<button is='MY-button'>hola</button>

<script>
    var Proto = Object.create(HTMLButtonElement.prototype);

    Proto.createdCallBack = function() {

        this.style.color = "orange";
    }

    var tmp = document.registerElement('MY-button', {
        prototype: Proto,
        extends: 'button'
    });

</script>

But with the BUTTON the extension is not done correctly; Consequently the BUTTON does not take the indicated properties.

what am I doing wrong?




Aucun commentaire:

Enregistrer un commentaire