我们的组件有时候需要根据property的值来呈现不同效果。
例如当isActive是true的时候，使用active样式。一个比较传统的方法是每当isActive改变的时候添加/删除active样式：
/* css */
.active {
color: yellow;
background: black;
}
// js
properties {
isActive: {
type: Boolean,
notify: true,
observer: '_observeIsActive'
}
},
_observeIsActive() {
if (this.isActive) {
this.classList.add('active');
} else {
this.classList.remove('active');
}
}
实际上polymer能提供一个更方便的解决。
使用reflectToAttribute
Polymer的property提供一个reflectToAttribute设置，来将property反射到元素的html（attribute）上。当你的<my-element>的isActive的reflectToAttribute设置为true，而isActive的值也为true的时候，浏览器的DOM会变成这样：
<my-element is-active></my-element>
通过这么个特性，我们就可以简化上面的功能的实现了：
/* 直接去掉之前的.active，根据元素的attribute里是否包含'is-active'来显示样式 */
:host[is-active] {
color: yellow;
background: black;
}
properties {
isActive: {
type: Boolean,
notify: true,
// 不再需要observer，但需要将property反射到attribute上
reflectToAttribute: true
}
}
