LitElement doesn't update child component from parent component

Question

I don't understand the concept of reactivity in lit's web components architecture. From other frameworks I come up with the assumption that the following example would update without problem, but it doesn't work with lit.

I can see that the child components render method is only being called initially and not again after I click the button. But even if I call it manually via the Web Components DevTools, it doesn't re-render with the new state.

What do I have to change to make it work?

Parent component:

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import './show-planets';

@customElement('lit-app')
export class LitApp extends LitElement {

    addPlanet() {
        this.planetsParent.push('Pluto')
        console.log('this.planetsParent', this.planetsParent)
    }

    @property({type: Array}) planetsParent = ['Mars'];

    render() {
        return html`
            <button @click="${this.addPlanet}">click</button>
            <show-planets .planetsChild="${this.planetsParent}"></show-planets>
        `;
    }
}

Child component:

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('show-planets')
export class ShowPlanets extends LitElement {

    @property({type: Array}) planetsChild = ['Pluto'];

    render() {
        console.log('this.planetsChild', this.planetsChild);
        return html`<h1>Planets are: ${this.planetsChild}</h1>`;
    }
}

Answer 1

LitElement's property system only observes changes to the reference. Recursively listening for changes to child properties would be prohibitively expensive, especially for large nested objects.

Therefore, setting a child or grandchild property of this.planetsParent will not trigger a render.

So what can we do if we need to update a nested child? Immutable data patterns can help us.

addPlanet() {
    const [...rest] = this.planetsParent;
    const newItem = 'Pluto';
    this.planetsParent = [newItem, ...rest];
}

Reference: https://open-wc.org/guides/knowledge/lit-element/rendering/#litelement-rendering