Re: [w3c/webcomponents] Clarify upgrading element's properties (#660)

Ah, this is because when you did `label.name = 'John Doe'`, you created a property on `label` element object itself. So even the element got later upgraded, the only thing that had happened is that `label.__proto__` now has `name`. Since any property lookup first looks at the property of the context object first, and then go through properties on the prototype chain, you're effectively overshadowing the property on `XLabel.prototype.name` by `label.name`.

Here's basically what's happening behind the scenes using just pure JS:
```js
class Element {}
class XLabel extends Element {
    get name() { return this._name; }
    set name(name) { this._name = name; }
}
beforeUpgrade = new Element;
beforeUpgrade.name = 'foo'; // <- 1. This created "own" property on beforeUpgrade
beforeUpgrade.__proto__ = XLabel.prototype; // 2. This introduces name getter on the prototype chain.
beforeUpgrade.name; // <- 3. This still gets the "own" property added in (1).
```


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/660#issuecomment-325839222