polymer 是用来构建web components的好框架 2015年 4月 angular2 依旧跳票 只能玩玩polymer了 不过这个框架也搞破坏性更新 好吧 一个一个开始玩 我会配图的 安
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');