Parent control and reactive properties

[dsgaye]

Hi everybody,

I am in a project with lit using some controls with reactive properties, but we found that when the value change inside the child control this value is not received by the parent.

Here is a simple playground to explain it
Playground

Is something wrong in the code or is a bug?

We need to be able to get de value of the children control from the parent without addintional functions while they are in diferents files as in the playground.

Thanks a lot for your help and support.

[sorvell]

This behavior is not automatic by design. Instead when you want to sync a property between a child and a parent, the child should dispatch an event that the parent handles to set its property. For additional background see the Events docs and Event communication between web components.

Here's an updated example. There are 2 changes:

1. On the child element, the click event that sets the property fires a change event. The name of this can be whatever you want. The parent then handles this event @change and sets its property to the child property.
2. The child part is bound via the property and not the attribute (add the . here .myreactiveprop). This isn't strictly necessary but it's typically better to bind properties when possible since this always works and attributes must be serializable as strings, which can be limiting for some data.

[dsgaye]

Thank you for your fast answer!
Do you know if in the future will be implemented a versión of Lit that allow to be able to do it in a similar way as my example?