前段时间在微信上看到伯乐在线推送的 一行代码，浏览器变临时编辑器 文章，感觉还蛮酷的。看完原理部分后，感觉恰好可以套用前几天想到的一个解决方案。

就是前文中提到的书签栏小工具。自己在使用中发现，在一些网站中使用会出现小工具css规则被所在页的css规则覆盖，而导致二维码“破相”的问题，也有人称其为“样式污染” ，效果截图：

参考了一些其他 bookmarklet 的做法，大都是使用内联规则提升选择器优先级，同时加入reset css的做法，有点以暴制暴，主动出击的感觉。 BMD（小工具的简称）主要会受影响的也就是构成二维码的 table td tr 标签，如果为这些容易出问题的标签加上reset css也不算太麻烦，但这样一来以后每次扩展一些功能都需要考虑样式污染问题，还得琢磨reset 规则写法。

恰好昨天看到一篇介绍Shadow DOM 的文章，感觉这东东恰能达到我需要的效果，翻了几篇文章，大概了解了关于Shadow DOM几个要点：

  1. 有shadow Host（影子宿主）、shadow root（影子子树根节点）、 shadow Boundary（影子边界）、和shadow DOM nodes（影子节点）几个概念，其中后三者组成shadow DOM Subtrees（影子子树）
  2. ShadowDOM提供功能模块的封装
  3. 影子宿主是影子子树的依托，属于文档树
  4. 影子子树的根节点由影子宿主确定
  5. 在渲染过程中，影子子树取代对应的文档树子树
  6. 影子根节点对象提供常规DOM操作函数（getElementByID…）获取影子子树节点

ShadowDOM 是为取代iframe 作为Widget 容器而产生，不过目前仅chrome支持 还需到chrome:flag 手动开启。 按照这个思路，要在常规浏览器中实现 shadowDOM 的效果，还是得依赖 iframe 元素，所以BMD采取的方案就是在文档body部分创建iframe 节点，iframe中再通过document.write 产生script标签完成js 文件引用。比原先直接将js文件插入现有网页文档 ，多了一层iframe 作隔离。

发了些时间把原版RNB 改造为 这个版本：

第一行代码，拖到书签栏就可以用了。

该方法解决了ie不支持Data URI的问题，故取名IE剋星版 😛 。