更好地理解input标签——Shadow DOM

相比<p>、<div>这样的标签，
input标签表现得更加复杂，而它是怎么实现的呢？

在这里我们要引出一个概念

##Shadow DOM
Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似这样的自定义一级标签，创建这些新标签内容和相关的的API被称为Web Component。
_{Web Component内容比较多不在这里讲,有空再写一篇}

在平时我们是没办法从DevTools中看到Shadow DOM的，因为默认是隐藏的，需要手动设置，

来一个例子，我们来看看一个input组件

在没有显示Shadow DOM之前 它在HTML中是长这个样子的

展开之后 是这个样子

可以看出在input标签内出现了#shadow-root(user-agent)，它包含了input组件内的DOM结构，
这就是所谓的Shadow DOM