Why don't default nested Polymer values work? - polymer

Question

I am using the latest 2.0-preview version of Polymer. I'd like to set default properties, and the Polymer documentation describes how to do it in Polymer 1.x. I was unable to find any changes in this approach for v2.0. But it seems to only work for primitive properties and not objects:
"use strict";
class NewElement extends Polymer.Element {
static get is() {
return 'new-element';
}
static get config() {
return {
properties: {
user: {
// type: Object, <-- doesn't help anyway
firstName: {
type: String,
value: "John",
// observer: '_callObserver' <-- FYI observers don't work properly too if this usage...
},
lastName: {
type: String,
value: "Doe"
}
},
position: {
type: String,
value: "Waiter" // <-- will set a high-level default value properly correctly
}
},
// observers: [
// '_callObserver(user.*)' <-- ...but works using this approach
// ]
}
}
constructor() {
super();
console.dir(this); // <-- see screenshots below
// this.user = { firstName: "John", lastName: "Doe" }; <-- works if initialized manually
}
}
customElements.define(NewElement.is, NewElement);
As you can see here there is a getter, and when I click on it, I see that user field is undefined.
What am I doing wrong?

Answer 1

It looks like you're trying to nest property declarations, which is not supported. You can declare an object property that contains subproperties (not property declarations that have type, observer, etc.).
The user property declaration:
properties: {
user: {
type: Object,
firstName: {
type: String,
value: "John",
},
lastName: {
type: String,
value: "Doe"
}
},
},
should actually look like this:
properties: {
user: {
type: Object,
value: function() {
return {
firstName: "John",
lastName: "Doe"
};
}
},
},
codepen