Polymer中is属性的原理与自定义指令实现

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <input type="checkbox" checked="{{checked::change}}">
  <template is="dom-if" if="[[checked]]">true</template>
  <template is="dom-if" if="[[!checked]]">false</template>
 </template>
 <script>
  Polymer({
   properties: {
    checked: { value: false }
   },
   is: 'demo-test'
  });
 </script>
</dom-module>

<demo-test></demo-test>

基于extends的自定义指令实现

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 关键就在这里
  ready: function(e) {
   this.innerHTML = '我是一个 demo-test';
  }
 });
</script>

<div is="demo-test"></div>