polymer 是用来构建web components的好框架
2015年 4月
angular2 依旧跳票
只能玩玩polymer了 不过这个框架也搞破坏性更新
好吧 一个一个开始玩
我会配图的
安装
其他不推荐 就用bower安装吧
没有bower.ini的走一遍
bower init
做过的
bower install --save Polymer/polymer#^0.8.0-rc.2
如何构建一个新的元素
你要先引入import一个polymer库
<link rel="import" href="bower_components/polymer/polymer.html">
先搞个标签
<dom-module id="x-foo">
<style>
/* CSS rules for your element */
</style>
<template>
<!-- local DOM for your element -->
<div>{{greeting}}</div> <!-- data bindings in local DOM -->
</template>
</dom-module>
<script>
// element registration
Polymer({
is: "x-foo",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
这个时候你就有一个自己的标签了
<x-foo></x-foo>
好的 如何获取标签呢 我喜欢用queryselector 你爱用啥用啥 因为那就是个标签
var el1 = document.querySelector('x-foo');
console.dir(el1);
看看有什么
element 元素 shadow dom 没法模拟完全 这个没办法
console台打印结构
多了点方法 其余就是个dom
还有就是官方最推荐的写法
MyElement = Polymer({
is: 'my-element',
constructor: function(foo, bar) {
this.foo = foo;
this.configureWithBar(bar);
},
configureWithBar: function(bar) {
...
}
});
var el = new MyElement(42, 'octopus');