不幸的是，上面的控制方式只适用于 chrome 浏览器，虽然大部分现代浏览器已经支持 shadow-dom ，但是能够审查 shadow-dom 内部 DOM 元素的只有 chrome 浏览器，其他浏览器仍会把这些细节隐藏。

我们也可以通常 Javascript 创建 shadow-dom ，实现各类功能的封装，主要通过：

HTMLElement.prototype.createShadowRoot = HTMLElement.prototype.createShadowRoot || HTMLElement.prototype.webkitCreateShadowRoot || function() {};

看看下面这个例子，在chrome内核浏览器下，将创建一个简单的 shadow-dom ，将我们的代码放入一个template 中，再通过 importNode 插入到 shadow-dom 中:

如果你现在在 chrome 内核浏览器下访问本文，那么上述的 codePen 中你应该可以看到 createShadowDomByJs 这一行文字，打开审查元素，会看到 <p> 结构是隐藏在 shadow-dom 中的。

本文是非常基本的一些关于 shadow-dom 的概念，只是它的冰山一角，没有十分深入的去研究。

现行的组件都是开放式的，即最终生成的 HTML DOM 结构难以与组件外部的 DOM 进行有效结构区分，样式容易互相混淆。Shadow-dom 的 封装隐藏性为我们提供了解决这些问题的方法。在 Web 组件化的规范中也可以看到 Shadow-dom 的身影，使用具有良好密封性的 Shadow-dom 开发下一代 Web 组件将会是一种趋势。

如果你读完本文后仍然意犹未尽，可以看看下面这些文章：

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。