第1章 概述 1
什么是Web组件 2
HTML模板 3
HTML引用 3
自定义元素 3
ShadowDOM 3
为什么使用Web组件 4
Ⅰ UI核心概念 8
第2章 基础知识 8
DOM抽象层的重要性 8
控件的API和生命周期 9
继承模式 11
依赖 12
优化 13
Web组件不仅仅是JavaScript 14
示例控件 14
Voltron控件基类 14
对话框类 17
对话框的CSS和HTML 18
总结 18
第3章 文档流与定位 19
文档流 19
定位元素 20
offsetParent 20
定位 22
计算元素的位置 24
相对于视窗 24
相对于文档 25
定位对话框控件 26
总结 27
第4章 理解和操作z-index 28
z-inde×究竟是什么？ 28
渲染层、堆叠次序与z-index 29
默认堆叠次序 29
重写默认堆叠次序 31
堆叠上下文 31
堆叠上下文是怎么创建的？ 31
事情越来越复杂了 32
管理z-index 32
z-index管理者对象 33
转化为jQuery插件 40
向对话框控件类添加 z-index管理功能 41
总结 42
Ⅱ 构建UI 44
第5章 克隆节点 44
使用cloneNode方法 45
使用jQuery.clone 46
对话框控件 48
总结 48
第6章 创建浮层 49
定义API 49
工具 51
检测滚动栏的宽度 51
计算容器宽度时考虑滚动条 52
获取元素尺寸和坐标 52
监听尺寸改变事件和滚动事件 54
更新选项 54
销毁 54
定位 55
相对视窗或相对另一个元素定位 56
相对另一个元素定位元素 58
向对话框控件添加浮层功能 60
总结 61
第7章 拖动元素 62
鼠标事件 62
$.mousemove 62
$.mousedown 63
$.mouseup 63
鼠标事件的最佳实践 63
1.在$.mousedown事件中绑定$.mousemove事件 63
2.在$.mouseup事件中解除$.mousemove的绑定 64
3.将$.mouseup事件响应函数绑定到＜body＞上 64
4.命名所有事件 64
定义API 64
创建拖拽柄 65
拖动起来 66
$.mousedown 响应函数 66
$.mousemove 响应函数 67
$.mouseup事件响应函数 68
销毁可拖拽实例 69
使对话框控件可拖拽 70
总结 71
第8章 调整元素尺寸 72
鼠标事件和最佳实践 72
事件 72
最佳实践 73
调整元素尺寸 73
编写调整尺寸的API 74
拖拽／尺寸调整柄区 75
绑定鼠标事件 76
$.mousedown事件响应函数 76
$.mousemove事件响应函数 78
$.mouseup事件响应函数 79
销毁工作 79
完成调整尺寸功能 79
使对话框控件可调整大小 84
总结 85
第9章 完成对话框控件 86
添加样式 86
添加CSS 86
合并JavaScript文件 87
总结 88
Ⅲ 构建HTML5 Web组件 90
第10章 模板 90
理解模板的重要性 91
延迟加载资源 91
延迟渲染内容 92
从DOM中隐藏内容 92
创建和使用模板 92
检测浏览器支持 92
将模板放到标签中 92
将模板内容插入到DOM中 93
使用模板编写对话框组件 93
创建和包装对话框模板API 94
实例化对话框组件 95
抽象对话框模板包装 95
总结 96
第11章 Shadow DOM 97
什么是Shadow DOM？ 97
Shadow DOM基础概念 98
Shadow宿主 98
Shadow根元素 98
在Shadow DOM中使用模板 99
Shadow DOM的样式 100
样式封装 100
为宿主元素添加样式 101
在文档中设置shadow子树根节点样式 103
内容映射 105
通过content标签映射 105
通过选择器映射内容 106
节点分发和接入点 107
Shadow接入点 108
事件与Shadow DOM 110
使用Shadow DOM更新对话框模板 110
对话框标签 110
对话框的API 111
更新对话框show方法 112
初始化对话框实例 112
总结 113
第12章 自定义元素 114
自定义元素简介 115
注册自定义元素 115
扩展元素 116
扩展自定义元素 116
扩展自原生元素 117
定义属性和方法 117
解析自定义元素 118
参与自定义元素的生命周期 119
createdCallback 119
attachedCallback 119
detachedCallback 120
attributeChangedCallback 120
为自定义元素添加样式 121
在自定义元素中使用模板和Shadow DOM 121
将对话框组件实现为一个自定义元素 123
创建对话框自定义元素 123
实现对话框自定义元素的回调函数 124
实现对话框自定义元素的API 125
显示对话框 126
总结 126
第13章 引入文档 127
声明引入 127
获取引入的内容 128
获取文档 129
应用样式 130
获取模板 131
执行JavaScript 132
理解引入和主文档的关系 132
解析引入 132
跨域 133
二级引入 133
加载自定义元素 133
引入对话框 134
总结 134
Ⅳ 使用Polymer测试、构建、部署Web组件 137
第14章 Polymer简介 137
Polymer元素 139
添加样式 141
外部资源 142
过滤表达式 143
模板格式 144
数据绑定 144
循环块 145
上下文绑定 145
分支判断 146
复合模板指令 146
特性（attribute）和属性（peoperty）：元素的API 147
原生特性 147
公开属性 147
实例方法 148
Polymer的JavaScript API 149
生命周期方法 149
事件 149
处理延迟工作 150
总结 150
第15章 将对话框迁移至Polymer 152
到底为什么要迁移到Polymer 152
“一键”迁移 153
管理依赖 154
使用Bower安装依赖 155
让我们开始吧 157
太简单了吧 167
Polymer世界中的jQuery 167
带来了什么 167
移除jQuery 168
关于jQuery的结论 171
总结 171
第16章 测试Web组件 173
PhantomJS 1 174
PhantomJS 2 175
Selenium WebDriver 175
Karma 175
测试用例 180
运行测试 183
总结 185
第17章 打包和发布 186
Vulcanize 187
Gulp 192
Grunt 192
Gruntfiles 194
Grunt任务 195
注册任务 196
Grunt配置 197
使用Bower发布组件 201
注册组件 203
总结 203
第18章 结语 204
往何处去 204
Polymer 205
Mozilla X-Tag 205
document-register-element 206
WebComponents.org 206
CustomElements.io 206
祝你好运 206
索引 208