刚写了个 https://github.com/luikore/style-scoped.js

作用是在各种浏览器支持 <style scoped>. html5 的 scoped 属性可以限制 style 标签的作用域，让样式只对包含它的父元素及其子元素生效。有了 <style scoped> 就能随便写 css+html 打包的组件而不用担心组件的样式污染到外面了。

例如

<div>
  不受下面的 style 标签影响, 还是黑色
</div>
<div><style scoped> div { color: red; } </style>
  在 scope 内, 变成红色了
</div>

原理是监视 dom 变化然后简单粗暴的逐条规则去遍历然后修改元素的 style 属性 (是 prepend 所以不影响你用 js 改的 style)

写这个的出发点是看到 polymer (polyfill shadow DOM) 做组件化的小坑：

• CSS encapsulation is not implemented.

做同样事情的也有个 https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin 但那个的做法是通过保存 computedStyle 做的，不能通过监视 dom 变化。

现在还有不少缺陷：style 中还不能带嵌套和 @ 指令，IE<9 可以作用但不能监视 dom 变化 (IE<9 也有监视的 api 还没弄...)... 还有就是 observer 粒度略粗，应该可以弄细点达到比较好的性能...