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');