problems assigning property

[fopsdev]

hi

i'm trying to set a property on a custom element like:

let obj = {id:500}
    return html`
      <state-a .obj=${obj}></state-a>
...

in the connected callback of state-a custom element i get null if doing console.log(this.obj) ?
thanks for any enlightment

[ruphin]

I agree that this behaviour is somewhat unexpected, but it has been decided that this should be the default behaviour of lit-html, see lit/lit#385 and lit/lit#442

For now, I am planning to keep the API for lite-html as close to lit-html as possible, so if you think this behaviour is weird, please raise an issue with lit-html

[fopsdev]

ok, thanks
but how can i now pass a object to another custom element? because .obj=${obj} doesn't work?

[ruphin]

.obj=${obj} works, it just assigns the property after the element is upgraded, so the property is not set during the constructor or connectedCallback, but the property setter will be invoked.

Here is an example: https://codepen.io/ruphin/pen/aamgXJ?editors=0010

I agree that this choice is unfortunate, as it effectively means you will render your elements twice every time - once during the initial construction and once when the properties are set. Maybe the lit-html authors will reconsider: lit/lit#453

[fopsdev]

thanks a lot for the sample, that makes it quite clear.
yeah my workaround for now is always use this obj setter in all the components and start rendering from there (to avoid double render) hopefully there will be nicer way to do that in the future.