webcomponentjs和angular兼容小问题

  webcomponentjs下angular.bootstrap(document, ['app])在firefox运行报错。

  由于firefox并不支持ShadowDOM,webcomponentjs作为一个很html5化的js库,对Node等一些基本类型进行了重写,使不支持html5的浏览器能使用html5的功能。

    angular.bootstrap运行之后,angular将对DOM进行遍历,寻找带ng标记的标签并做相应处理。

    当使用了angular-route之后,当angular要把带ng-view的元素替换掉时,出错了。webcomponentjs并没重写document,也就是说document中的childNodes并没被webcomponentjs包装过。angular.bootstrap(document, ['app])是从document这个对象的基础上开始遍历的。当执行replacChild时,由于webcomponentjs的包装就出了问题, newNode时从通过document.createComment生成的, webcomponentjs从写了create-*的方法,newNode是经过ewbcomponentjs包装的,但是firstElementToRemove是从document遍历中得来的元素,并没有被包装,当replaceChild(newNode, firstElmentToRemove)被执行时,就会出错。

    解决这个问题,只需要把angular(document, ['app'])改成angular(document.querySelector('html'),['app'])就行。把遍历源从根本替换掉,querySelector已经被webcomponentjs重写过。

    找这个bug可坑了,一直在chrome下做开发,chrome实现了ShadowDOM,但是其他浏览器还没实现。一跑到Firefox、IE下就出现一堆红字。翻了几个小时源码才找到这个错误。我也不知道这样解决到底对不对,我也是在摸索。尝鲜用polymer开发真心不容易啊。太嫩了,还待提高^_^

posted @ 2014-12-31 10:16  木士羽  阅读(510)  评论(0编辑  收藏  举报