CODEWITHSUNDEEP
javascriptpolymercustom-element
ckersch
ckersch

Reputation: 7687

Setting attribute on element gives error "Cannot set property '...' of undefined' with Polymer

I'm trying to set up a custom element using polymer that consists of a draggable box with an icon in it. I'd like to be able to define the icon by specifying an icon attribute on the element, so that I can declarative create elements rather than defining a setIcon method on the element, which would only be accessible through javascript.

I've tried to set my element up to handle the attribute by including a properties attribute on the element prototype I'm feeding into polymer, giving me element code that looks something like this:

var elementProto = {
    is : "my-element",
    behaviors : [someOtherProto],
    properties : {
        icon : {
            "type" : "String",
            "observer" : "_iconObserver",
        }
    },
    _iconObserver : function(){ /* Functionality for adding icon */}
};

elementProto.otherMethods = various functions;

Polymer(elementProto);

In another file, I'm then trying to set my icon attribute using setAttribute in another javascript function, (after importing my new element via its associated html file) like so:

var newElement = document.createElement("my-element");
newElement.setAttribute("icon", "some/icon/path.png");

Ideally, this would fire my observer function with the new path as an argument and I would set the URL for the image in my new element to whatever that path was. Instead, Chrome gives me this error:

Uncaught TypeError: Cannot set property 'icon' of undefined

Why am I getting this error, and what can I do to fix it?

Notes on debugging:

I've dug into the polymer code and found that the error originates from this line:

var model = this._clientsReadied ? this : this._config;

Both this._clientsReadied and this._config are undefined, which is causing this error in the ._setAttributeToProperty(model, name); method, where name is set as an attribute on model. I don't know enough about polymer to know why those attributes would be undefined, though.

Upvotes: 0

Views: 3374

Answers (1)

Supersharp
Supersharp

Reputation: 31161

Why am I getting this error, and what can I do to fix it?

You are getting this error because at the time you invoke createElement(), your Custom Element is not registered yet. Probably because the 2 files are parsed in the wrong order.

To fix this issue, you can try to change the order of the imported files, or you can wait for the HTMLImportsLoaded, or WebComponentsReady event.

document.addEventListener("HTMLImportsLoaded", function () 
{
    var newElement = document.createElement("my-element");
    newElement.setAttribute("icon", "some/icon/path.png");
});

Upvotes: 1

Related Questions