How to pass an Object to webcomponent base on stencil?

[Linya-IronMan]

@Component({
  tag: 'target-train-editor',
  styleUrl: 'target-train-editor.css',
  shadow: true,
})
export class TargetTrainEditor {
  @Prop({ attribute: 'train-resource', reflect: true, mutable: true }) trainResource?: string;

 render() {
    console.log(this.trainResource);
  }
}

<target-train-editor train-resource="{}"></target-train-editor>

when the type of trainResource is "object" or "Record<string, any>", the console result is undefined, when the type of trainResource is , the console result is {},

I also try the way in the doc

The result is also not as I wished;

[Linya-IronMan]

How to resolve the problem, is there something wrong with my understanding of the doc?

[rwaskiewicz]

Hey @Linya-IronMan 👋

I apologize that it took so long for someone to acknowledge this issue. It is not possible to pass an object to a web component via HTML. I have created #973 to clarify this in our documentation