Polymer 努力理解relectToAttribute的微妙之处

我正在努力理解聚合物元素属性的反射属性的微妙之处

我有一对元素用于围绕dom树传输值，如

iron meta

，我称之为

akc meta

和

akc meta query

。在我的测试夹具中，我正在这样做

<test-fixture id="basic-test">
<template>
  <template is="dom-bind" id=app>
    <akc-meta key="[[key1]]" value="{{value1}}" id="meta1"></akc-meta>
    <akc-meta-query key="[[key2]]" value="{{value2}}" id="meta2"></akc-meta-query>
    <akc-meta-query key="[[key3]]" value="{{value3}}" id="meta3"></akc-meta-query>
    <akc-meta key="[[key4]]" value="{{value4}}" id="meta4"></akc-meta>
  </template>
</template>
</test-fixture>

当钥匙相同时，这些元件在发动机罩下的元件之间传输值

虽然

akc元查询的
value
属性使用
notify:true

那么reflectToAttribute实际上做了什么？为什么需要它呢？
我在中创建了一个小示例


x-检验{
显示：块；
}
x测试[prop1=“initialvalue1”]{
边框：5px纯黄色；
}
x测试[prop2=“initialvalue2”]{
背景：绿色；
}
x测试[prop1=“newvalue1”]{
边框：5px纯黑；
}
x测试[prop2=“newvalue2”]{
背景：红色；
}
{{prop1}}
{{prop2}}
更新项目1
更新建议2
HTMLImports.whenReady（函数（）{
聚合物({
是‘x-测试’，
特性：{
建议1：{
类型：字符串
},
提案2：{
类型：字符串，
reflectToAttribute:真
},
},
update1:function（）{
this.prop1=“newvalue1”；
},
update2:function（）{
this.prop2=“newvalue2”；
}      
});
});

这里的元素有两个属性
prop1
不会反映到属性中，但是
prop2
会反映到属性中。两者都设置为初始值。如果打开开发人员工具，您将看到如下内容：

有一个更新按钮可以更改
prop1
或
prop2
。如果单击每个按钮并更新这两个属性，您将看到此图片

如您所见，
prop1
仍保持其旧状态。状态更改尚未反映回属性。相比之下，
prop2
已被反映并更改

现在，如果您通过JavaScript访问任一属性，您将获得更新的值。但是，当您访问HTML属性时，在
prop1
的情况下，您将不会访问该属性

在我的示例中，当您使用带有属性选择器的CSS规则时，可能会出现这种情况。更新
prop1
时，选择器
x-test[prop1=“newvalue1”]
不适用。另一方面，
x-test[prop2=“newvalue2”]
在更新
prop2
后确实适用，因为它被配置为反射到属性。
我想你说的是，可能需要反射属性的是css？是的，至少这是我能想到的反射到属性的第一个用例。
      app.key1 = 'keya';
      app.key2 = 'keya';
      app.key3 = 'keya';
      app.value1 = 'This is a multiple query test';
      expect(app.value2).to.equal('This is a multiple query test');
      expect(app.value3).to.equal('This is a multiple query test');
      app.value1 = 'New Value';
      expect(app.value2).to.equal('New Value');
      expect(app.value3).to.equal('New Value');

<style>   
    x-test {
      display: block;
    }
    x-test[prop1="initialvalue1"] {
      border: 5px solid yellow;
    }
    x-test[prop2="initialvalue2"] {
      background: green;
    }
    x-test[prop1="newvalue1"] {
      border: 5px solid black;
    }
    x-test[prop2="newvalue2"] {
      background: red;
    }


</style>
<dom-module id="x-test">
  <template>
    <div>{{prop1}}</div>
    <div>{{prop2}}</div>
    <button on-click="update1">Update Prop1</button>
    <button  on-click="update2">Update Prop2</button>
  </template>
</dom-module>

<script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-test',
      properties:{
        prop1: {
          type:String
        },
        prop2: {
          type:String,
          reflectToAttribute: true
        },
      },
      update1: function(){
        this.prop1 = "newvalue1";
      },
      update2: function(){
        this.prop2 = "newvalue2";
      }      
    });
  });
</script>

<x-test prop1="initialvalue1" prop2="initialvalue2"></x-test>