Inheriting custom elements

It seems to me that the lifecycle callback is being triggered, but I cannot access the properties of the ma class.

For example, I have this custom element:

var Game = document.registerElement('x-game', {
    prototype: Object.create(HTMLElement.prototype, {
        cards: {
            value: [],
            writable : true,
            enumerable : true,
        },
        createdCallback: {
            value: function () {
                this.cards = deck();
            }
        }
    })
});

      

With deck () function to populate my array.

and I want to create another element inheriting the first one:

var Golf = document.registerElement('x-golf', {
    prototype: Object.create(Game.prototype, {
        columns: {
            value: []
        },
        waste: {
            value: new Waste
        },
        talon: {
            value: new Talon
        },
        createdCallback: {
            value: function () {    
                Game.prototype.createdCallback.apply();
                this.initialize();
            }
        },
        initialize: {
            value : function () {
            for (var i = 0; i < 7; i++) {
                var column = new Column;
                for (var r = 0; r < 5; r++){
                    column.cards[r] = this.cards.pop();
                }
                this.columns[i] = column;
            }
            this.waste.cards.push(this.cards.pop());
            for (var j = 0; j < this.cards.length; j++){
                var card = this.cards.pop();
                card.side = 'verso';
                this.talon.cards[j] = card;
            }
        }
    })
});

      

Usually with the Game.prototype.createdCallback.apply();

property of the cards on the new x-golf element will be filled, but this is not the case. The map property value on the console is still an empty array, the default for it.

So how do you make sure the map property is populated correctly by calling the createdCallback superclass?

+3


source to share


1 answer


You are missing a target to call .apply()

:

Game.prototype.createdCallback.apply(this);

      



Jsbin work .

+1


source







All Articles