参考链接： Polymer教程

前端组件化Polymer入门教程目录： 

前端组件化Polymer入门教程(1)——初识 安装前端组件化Polymer入门教程(2)——快速入门前端组件化Polymer入门教程(3)——自定义元素前端组件化Polymer入门教程(4)——生命周期前端组件化Polymer入门教程(5)——监听属性值变化前端组件化Polymer入门教程(6)——Local DOM前端组件化Polymer入门教程(7)——事件前端组件化Polymer深入篇(1)

 一说到组件化，你可能就想到了React，Angular，Vue，等等...但这些毕竟写法都不一样，你有没有想过，要是统一了多好，如果你有这个想法，那么恭喜，Chrome早在几年前就有这个想法，就是指定一套规范的web组件化方案叫做（Web Component），目前Chreom已经实现了，但其他浏览器支持情况不太乐观。不过有一个兼容库，可以解决这个问题，叫“webcomponents.js”（兼容性其实还是有些问题的，不过作为学习，想那么多干啥。）那么Ploymer.js又是干什么的，话说实现的这一套web组件化自己手动写起来还是有些麻烦的，于是Chreom就写了一个库，叫Polymer.js来简化Web Component的操作，同时它又添加了一些东西，你可以理解为框架，也就是说Polymer这个框架是基于Web Component来写的。 

下载地址：webcomponentsjs Polymer 

目录： 

!DOCTYPE html

html

head

    meta charset=\"UTF-8\"

    title Document /title

    !-- 这是一个基础版的兼容库 --

    script src=\"webcomponents-lite.min.js\" /script

    !-- 将rel修改为import可以引入另外一个HTML，它将会被执行 --

        link rel=\"import\" href=\"./template/tab.html\"

/head

body

/body

/html  

导入你需要的组件。

link rel=\"import\" href=\"./template/tab.html\"  

tab.html 

在组件中是可以不写html中的那一大堆东西的，在这个组件中我们把

Polymer给引入了进来，可能你会很奇怪，为什么不是一个js文件，后面会讲到，先这样写，接下来我们就可以使用Polymer的功能了。