本节为体验篇，就是让你了解它有哪些功能，不做详细说明，后面再来讲细节。
自定义元素
组件页
<link rel="import" href="../polymer-1.7.0/polymer.html">
<dom-module id="my-tab">
<!-- 可以在template里面写样式、html、js -->
<template>
<style>
div{
color:red;
border:1px solid #dedede;
}
</style>
<div>
Hello World!
</div>
<script>
console.log('Hello world');
</script>
</template>
<dom-module/>
<script>
Polymer({
// 组件名字，必须加-否则不起作用。
is:'my-tab'
});
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<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>
<my-tab></my-tab>
</body>
</html>
效果
配置元素属性和内容
tab.html
<link rel="import" href="../polymer-1.7.0/polymer.html">
<dom-module id="my-tab">
<!-- 可以在template里面写样式、html、js -->
<template>
<style>
div{
color:red;
border:1px solid #dedede;
}
</style>
<div>
{{msg}}
</div>
</template>
<dom-module/>
<script>
Polymer({
is:'my-tab',
properties:{
msg:{
type:String
}
}
});
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<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>
<my-tab msg="世界你好！"></my-tab>
</body>
</html>
