链接如下

其实chrome是有这个东西的，那就是shadow DOM。

什么是Shadow-Dom？Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。它的最大的用处在于隔离外部环境用于封装组件。

比如说，我们正常写的输入框html代码是这样的：

<input name="password" maxlength="50" placeholder="请输入密码">

然后它就是可以完成内容输入，格式限制，字数限制等功能了。功能甚是强大，其实这个标签对于浏览器来说就是一个封装好的，可以隔离外部的组件。正常下，我们用chrome开发者工具，看到的和我们书写的代码差不多，其实里面内有乾坤，如果你想看到里面的乾坤，那就需要借助Shadow DOM。如何开启chrome的Shadow DOM功能呢？很简单，F12调出开发者工具，然后Settings → General → Elements → Show user agent shadow DOM来开启

开启后，你再回去看input的dom节点就能看到里面的结构啦： 

既然能看到里面的结构，而里面实际也是由各种dom节点组成的，自然也就可以看到应用做里面dom节点的样式啦~

转自：http://www.w3cmark.com/2016/502.html