Stencil组件对象类型@Prop属性HTML设置无效，是Bug还是疏漏？

HTML属性的本质是字符串，Stencil对于布尔、字符串这类和HTML原生属性类型匹配的Prop，会自动做类型转换，但对象类型的Prop不会自动解析字符串为对象——这就是你的代码里my-prop="{hello: 'world'}"没生效的原因：这个属性值在Stencil看来只是普通字符串"{hello: 'world'}"，而非JS对象，所以组件会继续使用默认的空对象。

解决方法有这几种，根据你的使用场景选择： #

1. 在JavaScript/TypeScript中直接设置组件属性 #

如果你的代码能直接操作DOM元素，跳过HTML属性，直接给组件的JS属性赋值：

const myComponent = document.querySelector('my-component');
myComponent.myProperty = { hello: 'world' };

这种方式最直接，因为你直接传递的是JS对象，Stencil能正确识别并更新Prop。

2. 给Prop添加transform函数解析字符串为对象 #

如果你必须通过HTML属性传递对象，可以在Prop定义中添加transform函数，手动将字符串解析为对象。注意要传递合法的JSON字符串（键必须用双引号）：

首先修改组件的Prop定义：

import { Prop } from '@stencil/core';

export class MyComponent {
  @Prop({ 
    attribute: "my-prop",
    // 添加转换函数，把JSON字符串转为对象
    transform: (value: string) => {
      try {
        return JSON.parse(value);
      } catch (error) {
        console.error('Failed to parse my-prop value:', error);
        return {}; // 解析失败时返回默认值
      }
    }
  }) 
  public myProperty?: object = {};
}

然后在HTML中传递合法的JSON字符串（用单引号包裹属性值，内部键用双引号）：

<my-component my-prop='{"hello": "world"}'></my-component>

3. 在JSX/TSX中直接传递对象（如果是在框架或Stencil项目内部使用） #

如果是在Stencil项目的JSX/TSX代码里使用这个组件，直接像普通React/Vue组件那样传递对象即可，不需要HTML属性的写法：

<MyComponent myProperty={{ hello: 'world' }} />

这种方式下Stencil会直接接收JS对象，无需额外处理。

补充说明 #

Stencil的Prop设计是为了兼顾原生HTML的特性（属性都是字符串）和JS组件的类型需求，所以对象、数组这类复杂类型需要显式处理字符串到对应类型的转换，这是预期行为而非Bug。

内容的提问来源于stack exchange，提问作者user923679