Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

v4.32.0

Current Behavior

When a component property changes between different falsy values, the DOM may not update, leaving the rendered output out of sync.

Expected Behavior

The dom should be in sync the currently value of the prop.

System Info

Steps to Reproduce

Setup:
A component with a prop as any and and rendering an input with the prop binded to the value

@Component({
  tag: 'cmp-input-wrapper',
  shadow: true,
})
export class FalsyDemo {
  @State() value: any = 0;

  render() {
    return (
      <Host>
        <input value={this.value} />
      </Host>
    );
  }
}

Steps:

• Now set value to an empty string
• Now set value to 0

Code Reproduction URL

https://github.com/SaiGovardhana/stencil-starter

Additional Information

We have a numeric input wrapper component where the value type is defined as any, allowing consumers to pass either a string or a number depending on their use case (for example, to preserve leading zeros). Currently, we are handling this situation when switching between falsey values by performing preliminary checks and then converting the value to a string with toString().