向FAST Web组件传递JSON参数时出现异常，求原因解析

核心问题 #

你遇到的截断问题根源有两个：

1. @attr装饰器的特性：FAST Element的@attr默认处理的是HTML字符串属性，HTML属性值会被浏览器按空格分割，所以只要属性值里有空格，就会被截断到第一个空格的位置。
2. 模板绑定写法错误：在html``模板字面量里直接写designToken={{...}}会被当成普通HTML属性的字符串值，而不是对象绑定，浏览器解析时自然会按空格截断。

解决方案 #

方案1：改用@observable传递对象（推荐）

@attr适合传递简单字符串/数值类型，复杂对象应该用@observable，它专门处理组件的响应式对象状态，不需要经过HTML属性的字符串转换：

import { observable, customElement, FASTElement } from '@microsoft/fast-element';

@customElement({
  name: 'my-fast-styled-comp',
  template,
  styles,
})
export class MyFastStyledComp extends FASTElement {
  @observable designToken: any = {};

  designTokenChanged(oldValue: any, newToken: any) {
    console.log(newToken); // 完整输出对象
  }
}

然后在模板里用正确的绑定语法传递对象：

// 父组件中定义目标对象
const designToken = {
  "--font-bold": "700",
  "--font-thin": "200",
  "--color-primary": "teal",
  "--color-accent": "yellow"
};

// 用FAST模板绑定语法传递
render(html`<my-fast-styled-comp :designToken=${designToken}></my-fast-styled-comp>`, container);

方案2：如果必须用@attr，添加转换器

如果因为某些原因必须用@attr，需要自定义转换器，将JSON字符串转换为对象，同时确保传递的JSON没有空格：

import { attr, customElement, FASTElement, ValueConverter } from '@microsoft/fast-element';

// 自定义转换器：字符串与对象互转
const jsonConverter: ValueConverter = {
  toView(value: any) {
    return JSON.stringify(value);
  },
  fromView(value: string) {
    try {
      return JSON.parse(value);
    } catch (e) {
      return {};
    }
  }
};

@customElement({
  name: 'my-fast-styled-comp',
  template,
  styles,
})
export class MyFastStyledComp extends FASTElement {
  @attr({ converter: jsonConverter }) designToken: any = {};

  designTokenChanged(oldValue: any, newToken: any) {
    console.log(newToken); // 完整输出对象
  }
}

传递时使用无空格的压缩JSON字符串：

render(html`<my-fast-styled-comp designToken='{"--font-bold":"700","--font-thin":"200","--color-primary":"teal","--color-accent":"yellow"}'></my-fast-styled-comp>`, container);

关键注意点 #

• FAST的html``模板里，绑定属性要用:属性名=${变量}的语法，直接写属性名={{...}}会被当成普通HTML字符串属性，这是常见的新手误区。
• 复杂数据类型（对象、数组）尽量用@observable，避免HTML属性的字符串转换带来的各种问题。

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