Polymer组件里根据property值来显示不同的样式

我们的组件有时候需要根据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

详细可查看文档Reflecting properties to attributes

Polymer的property提供一个reflectToAttribute设置，来将property反射到元素的html（attribute）上。当你的的isActive的reflectToAttribute设置为true，而isActive的值也为true的时候，浏览器的DOM会变成这样：

通过这么个特性，我们就可以简化上面的功能的实现了：

/* 直接去掉之前的.active，根据元素的attribute里是否包含'is-active'来显示样式 */
:host[is-active] {
  color: yellow;
  background: black;
}

properties {
  isActive: {
    type: Boolean,
    notify: true,
    // 不再需要observer，但需要将property反射到attribute上
    reflectToAttribute: true
  }
}