Custom elements seem to cache data after being deleted and re-added

[anniesullie]

The context for this is crbug.com/242701

I made a jsfiddle to reduce the problem a bit:
http://jsfiddle.net/jqUs7/

The fiddle has a my-element custom element, with this.foo = {}. Click on the element and it sets this.foo.bar = 'hello!'. Then click the button, the element is deleted, a new one is created using document.createElement, and appended to the div. The new element renders {{foo.bar}} as 'hello!' when it should be undefined.

[sorvell]

The problem here is that the foo property has been set to a static object
that will be shared by all instances.

Instead, when a property needs to be a non-shared object value, the proper
way to initialize it is in the ready method:

ready: function() {
  this.foo = {};
  // arrays too
  this.list = [];
}

[sjmiles]

For the language lawyers, static is a tricky term, more simply the foo object has been set on the element's prototype. By definition, the prototype is shared by all the instances.

For posterity:

The tricky part is that, normally, setting a property in an instance creates that property on the instance. If I put zot: 3 in my prototype, then do this.zot = 5; the 5 is not shared across instances, so why is it different when I set this.foo.bar = 5?

The answer is that when you set a property like foo.bar you are not setting a property on the element instance, but on foo. As Steve mentioned, this same effect occurs if you manipulate an array that is declared on a prototype.

Fwiw, I believe that this particular footgun is why ES6 disallows (non-function) properties in Class definitions.

[anniesullie]

Thanks, that helps a lot! I've refactored my code to avoid this problem.

Note that there are some examples with similar code in the docs:
http://polymer-project.appspot.com/polymer.html

Polymer.register(this, {
  person: {
    name: "Scott",
    nameColor: "orange"
  }
});

So it kind of looks like this is the "right way" to initialize a property.

[morethanreal]

I think there's a subtle point here that the element registration is
evaluated once, so only one instance of the object used in property
initialization is ever created, vs. this.ready() is evaluated every time
you create an element instance. Does this merit a note in the docs?

On Thu, May 23, 2013 at 12:40 PM, anniesullie [email protected]:

Thanks, that helps a lot! I've refactored my code to avoid this problem.

Note that there are some examples with similar code in the docs:
http://polymer-project.appspot.com/polymer.html

Polymer.register(this, {
person: {
name: "Scott",
nameColor: "orange"
}
});

So it kind of looks like this is the "right way" to initialize a property.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/159#issuecomment-18366911
.

[sjmiles]

The key concept here is that the thing you are registering is a prototype. I can see how this is not clear from the register call itself and we should enhance clarity here.

Polymer.register is a sugaring around document.register, which has a signature like document.register(name, dictionary), where dictionary is expected to have prototype property. We sugared away most of that so you pass in the prototype directly which has probably made this a bit foggier.

Most of these issues flow from the nature of prototype, which is strictly speaking out of scope for Polymer to explain. I admit that prototype can be tricky, and the more documentation the better, but it's good to be clear regarding concepts we are introducing vs concepts are just part of the platform.

[sjmiles]

Note that there are some examples with similar code in the docs:

You are right, that's extremely bad. :)

[anniesullie]

Thanks for all the explanations!

For me, changing the "person" example in the documentation and including the note about registration (once vs every instance) would be good improvements to the docs. I agree a really in-depth explanation of what's happening here is definitely out of scope for the current Polymer docs.

[ebidel]

Fixed up the docs and made a note for object initialization:
Polymer/old-docs-site@db50065