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.27.1 and v4.36.3 (others untested)

Current Behavior

When passing a string that contains valid JSON (such as "{\"activeOptionalProperties\":[\"digitalObjectLocationAccessProtocol\"]}") to a Stencil component prop whose type is not just string (such as string | number), it gets parsed into an object.

Expected Behavior

The docs clearly mention that Stencil never parses strings in this manner, and I also would not expect this to happen. A valid JSON string being passed to a prop of type e.g. string | number should just remain a string.

System Info

System: node 22.11.0
    Platform: darwin (24.6.0)
   CPU Model: Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz (16 cpus)
    Compiler: /Users/chris/WebstormProjects/repro-string-to-object/node_modules/@stencil/core/compiler/stencil.js
       Build: 1755687753
     Stencil: 4.36.3 🐈
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Confirmed on Firefox, Chrome and Safari

Steps to Reproduce

Create a component like this

@Component({
  tag: 'rendering-component',
})
export class MyComponent {
  @Prop() value: string | number;

  render() {
    console.log(typeof this.value);

    return <div>{this.value} (type: {typeof this.value})</div>;
  }
}

Then integrate this component in a different Stencil component and pass a valid JSON string to the value prop:

<rendering-component value={"{\"activeOptionalProperties\":[\"digitalObjectLocationAccessProtocol\"]}"} />

Then take a look at the console. It will log type object. It will also throw an error, because objects can't be rendered.

Code Reproduction URL

https://github.com/craquet/repro-string-to-object

Additional Information

When annotating the property with just string, the string gets passed around as expected. string | undefined also works. As soon as we use string | boolean or string | number, the issue occurs.

When the string is not properly formatted JSON, it also just gets passed around as a normal string.