LitHauntedElement: No re-render observed when incoming prop changed

[barryf001]

Hi,

Relates to LitElementHaunted usage.

Could you explain why when a state variable is passed to a child component (as per example code) there is no re-rendering of the child component? Maybe I'm using this incorrectly but this seems the most intutive usage..

import { html } from 'lit-element';
import { litHaunted } from './lit-haunted-element.js';
import { useState } from 'haunted'


const CounterChild = litHaunted(({count}) => {

  return html`
    <h1>${count}</h1>
  `;
});

window.customElements.define('my-counter-child', CounterChild);


const Counter = litHaunted(() => {

  const [count, setCount] = useState(0);

  return html`
      <p>A paragraph</p>
      <button type="button" @click=${() => { setCount(count + 1)}}>Increment</button>
      <p><strong>Count:</strong> ${count}</p>
    <div>
    <my-counter-child .count=${count}></my-counter-child>
   </div>
  `;
});

window.customElements.define('my-counter', Counter);

[matthewp]

What is LitHauntedElement and how does it differ from component?

[barryf001]

From the examples for integration with LitElement
https://github.com/matthewp/haunted/blob/main/examples/lit/lit-haunted-element.js

[bennypowers]

what do you mean by "state variable is passed to a child component"?

do you mean $("my-counter").count = 3? in that case, count hasn't been defined on the class as an observed property, so LitElement's lifecycle won't pick up changes.