How to propagate property value down to a child of a LitElement

Question

I want to compose a LitElement widget from two other widgets. The basic idea would be that one "selector" widget selects something, send an event to its parent "mediator" one, which in turns would update the related property in a "viewer" child widget (event up, property down). This follows the "mediator pattern" example of the documentation about composition, only that I need to deal with fully separated classes.

Below is a minimum working example, which builds and run in the LitElement TypeScript starter template project, with all dependencies force-updated with ncu --upgradeAll.

Detailed description

The desired behavior would be that the Viewer widget does render the item["name"] when the user selects something in the dropdown list.

So far, I managed to send an event up from the Selector to the Mediator, and to update the item_id attribute within the Viewer. However, this does not seem to trigger an update of the item_id property of the Viewer.

The approach used is to override updated in the Mediator (l.36), loop through its children and do a child.setAttribute, which is probably highly inelegant. There is surely another —cleaner— way, but I failed to clearly understand the update sequence of Lit.

Example

index.html

mediator.ts

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

@customElement('my-mediator')
export class Mediator extends LitElement {

    // @state()
    @property({type: Number, reflect: true})
    item_id: number = Number.NaN;

    static override styles = css` `;

    override render() {
        console.log("[Mediator] rendering");
        return html`Mediator:
              
                  
              
              
                  
              `;
    }
    
    private onSelected(e : CustomEvent) {
        console.log("[Mediator] Received selected from selector: ",e.detail.id);
        this.item_id = e.detail.id;
        this.requestUpdate();
    }
    
    private onSlotChange() {
        console.log("[Mediator] viewer's slot changed");
        this.requestUpdate();
    }

    override updated(changedProperties:PropertyValues): void {
        super.updated(changedProperties);
        // It is useless to set the Selector's item_id attribute,
        // as it is sent to the Mediator through an event.
        for(const child of Array.from(this.children)) {
            if(child.slot == "viewer" && !Number.isNaN(this.item_id)) {
                console.log("[Mediator] Set child viewer widget's selection to: ", this.item_id);
                // FIXME: the item_id attribute is set in the Viewer,
                // but it does not trigger an update in the Viewer.
                child.setAttribute("item_id", `${this.item_id}`);
            }
        }
    }


}

declare global {
  interface HTMLElementTagNameMap {
    'my-mediator': Mediator;
  }
}

viewer.ts

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

@customElement('my-viewer')
export class Viewer extends LitElement {

    @property({type: Number, reflect: true})
    item_id = Number.NaN;

    private item: any = {};

    static override styles = css` `;

    override connectedCallback(): void {
        console.log("[Viewer] Callback with item_id",this.item_id);
        super.connectedCallback();
        if(!Number.isNaN(this.item_id)) {
            const items = [
                {"name":"item 1","id":1},
                {"name":"item 2","id":2},
                {"name":"item 3","id":3}
            ];
            this.item = items[this.item_id];
            this.requestUpdate();
        } else {
            console.log("[Viewer] Invalid item_id: ",this.item_id,", I will not go further.");
        }
    }

    override render() {
        console.log("[Viewer] rendering");
        return html`Viewer:
            Selected item: ${this.item["name"]}`;
    }

}

declare global {
  interface HTMLElementTagNameMap {
    'my-viewer': Viewer;
  }
}

selector.ts

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

@customElement('my-selector')
export class Selector extends LitElement {

    @property({type: Number, reflect: true})
    item_id = Number.NaN;

    private items: Array = [];

    static override styles = css` `;

    override connectedCallback(): void {
        console.log("[Selector] Callback");
        super.connectedCallback();
        this.items = [
            {"name":"item 0","id":0},
            {"name":"item 2","id":2},
            {"name":"item 3","id":3}
        ];
        this.item_id = this.items[0].id;
        this.requestUpdate();
    }

    override render() {
        console.log("[Selector] Rendering");
        // FIXME the "selected" attribute does not appear.
        return html`Selector:
            `;
    }

    private onSelection(e : Event) {
        const id: number = Number((e.target as HTMLInputElement).value);
        if(!Number.isNaN(id)) {
            this.item_id = id;
            console.log("[Selector] User selected item: ",this.item_id);
            const options = {
                detail: {id},
                bubbles: true,
                composed: true
            };
            this.dispatchEvent(new CustomEvent('selected',options));
        } else {
            console.log("[Selector] User selected item, but item_id is",this.item_id);
        }
    }
}

declare global {
  interface HTMLElementTagNameMap {
    'my-selector': Selector;
  }
}