本文深入解析Polymer框架中is属性的核心机制，阐述其作为指令（Directive）的本质。通过对比内置的dom-if与dom-repeat，演示如何利用extends参数自定义元素行为，并结合Shadow DOM实现灵活的模板渲染控制，帮助开发者掌握Polymer底层扩展能力。
Polymer中is属性的核心机制
在Web开发中，根据特定属性值动态控制模板渲染是常见需求，这对应于基础的分支逻辑。正如Angular提供ng-if指令，Polymer框架也提供了对应的dom-if指令。然而，本文的重点并非仅介绍dom-if，而是将其作为切入点，深入探讨其背后更核心的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>
无论是dom-if还是前文提到的dom-repeat，它们之所以能在template元素上生效，关键在于使用了is属性。例如，可以通过绑定控件上的布尔值，利用is属性指定不同的模板进行渲染。这种机制允许开发者根据数据状态灵活切换显示内容。
基于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>
那么，is属性具体指定了什么？其概念与Angular中的Directive（指令）一致，尽管Polymer未采用该术语。开发者完全可以基于此机制自定义指令。例如，通过给div元素添加is="demo-test"，可以扩展元素行为。在定义时，只需通过extends参数指定目标标签名，即可创建具备特定功能的自定义元素。虽然Polymer内置的dom-repeat、dom-if及其他dom-*指令均遵循此定义方式，且内部实现较为复杂，但理解这一基础模式足以应对入门级开发需求。若需深入细节，建议直接查阅源码，因为官方文档中对此的定义描述较为有限。