Polymer 3组件传入自定义对象属性值不生效问题排查

常见根因 #

• 引用类型属性的默认值配置不符合规范
  Polymer框架对Object、Array这类引用类型属性有明确的配置要求：默认值不能直接内联定义静态字面量，必须通过返回对应值的工厂函数提供。如果在static get properties中直接写value: { showMe: false, text: '', text2: '' }，会导致所有组件实例共享同一份对象引用，不仅会出现实例间属性互相污染的问题，还会在外部传入新对象时，因为引用判断逻辑异常，导致外部值无法正确同步到组件内部。
  正确配置方式：

static get properties() {
  return {
    myObject: {
      type: Object,
      notify: true,
      // 引用类型属性必须通过函数返回默认值
      value: () => ({
        showMe: false,
        text: '',
        text2: ''
      })
    }
  }
}

• 外部传值的语法存在绑定错误
  绝大多数绑定失效的问题都来自外部组件引入myComp时的写法不规范：

• 如果直接在HTML标签上写静态属性传值，需要将JSON字符串用正确的引号规则包裹（外层单引号、内部字段双引号），否则Polymer的类型转换逻辑无法将字符串解析为结构化对象，最终myObject拿到的是原始字符串，myObject.showMe取值为undefined，dom-if条件判断无法通过。

• 如果在外部组件的模板中做动态绑定，漏写双花括号的绑定标记（比如将myObject="{{customObj}}"错写为myObject="customObj"），Polymer只会把字符串内容作为静态属性值传给组件，不会读取当前作用域的自定义对象完成赋值。

• 初始化顺序导致的属性值覆盖
  受引用类型属性的共享引用问题影响，组件初始化时会优先加载共享的默认对象，等外部传入自定义对象时，对应的属性变更检测器无法正确识别新的对象引用，导致传入的值被默认的初始结构覆盖，最终组件拿到的还是showMe: false的默认对象，无法触发内容渲染。

快速校验方案 #

• 打开浏览器的组件调试面板，查看myComp实例上的myObject实际值，确认是字符串、默认对象还是外部传入的自定义对象，定位是解析错误、同步错误还是覆盖问题
• 临时在dom-if的条件中加调试断点，确认取值时myObject的实际结构，排查路径拼写错误导致的取值失败

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