Shadow DOM

在HTML中，UI组件的封装一直都是一件很棘手的事情，因为CSS是全局的，虽然可以通过后代选择器来简单处理，但在团队开发中依然有全局样式名称冲突的风险。Shadow DOM提供了一个与全局CSS样式隔离的环境，可以将UI组件封装成一个类似替换型元素的组件。
　　那么，如何使用Shadow DOM呢？其实很简单，只要在DOM元素上调用createShadowRoot方法即可让该元素成为一个Shadow DOM的根。但需要注意浏览器兼容，有些浏览器是需要加前缀的。下面是例子
运行

<div id="test">元素本来的内容不会被渲染</div>
<script>
var root=test.webkitCreateShadowRoot();
root.innerHTML="<strong>我就是传说中的 Shadow DOM</strong>";
</script>

　　在Shadow DOM中的东西不会在DOM树中出现，所以审查元素时只会看到它的基元素。而且，一旦元素创建了Shadow Root，它自身的内容就不再被正常渲染了，我们只会看到Shadow DOM中的内容。上面的例子中使用了innerHTML，这是为了方便演示才使用的，实际应用时使用TEMPLATE标签会更好。
　　那么，独立的CSS又从何说起呢？在Shadow DOM中可以有STYLE标签，Shadow DOM中的STYLE标签不会影响到外部文档，外部文档的样式表也不会影响到Shadow DOM。比如下面这个例子

<style>div {color:blue;}</style>
<div class="">我是 Shadow DOM 外的 DIV</div>

<div id="test"></div>

<template id="temp">
  <style>div {color:red;}</style>
  <div>我是 Shadow DOM 内的 DIV</div>
</template>
<script>
var root=test.webkitCreateShadowRoot();
root.appendChild(document.importNode(temp.content));
</script>

　　

运行
　　这个例子中对全局的DIV元素设置了文字颜色，在Shadow DOM中也对内部的全局DIV元素设置了文字颜色。但是这两个样式并没有冲突，都在各自的范围内生效着。所以对于UI组件的封装，这么做就可以完全避免样式的冲突。