你见或者不见，我就在那里。不离不弃！--(shadow DOM)(前端冷知识)

1、何为shadow-DOM？

shadow-DOM: 翻译过来就是影子模型！

大部分前端可能没有见过，但是你在开发过程中一定受到过影子DOM的恩惠！且听我慢慢道来！

与人的影子不同！不是到有光的地方就能看到，我们需要借助调试工具！这里我使用的是chrome浏览器。

现在html文档里面插入一个video标签 为了方便观察记得control poster属性是为了给图片加载一个封面。免得黑咕笼咚的。

<video controls poster="">
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>

此时，我们打开开发者工具(F12)

至此！我们距离shadowDOM已经很近了。（不要关闭开发者工具，继续按下F1。）勾选上 “Show user agent shadow DOM” 。

此时，我们回过头去审查 video。

发现video标签下面出现了”shadow-root(user-agent)”而且多了许多div标签。基本上都带有pseudo。当鼠标放到div上面页面的当中的控制器就显示被选中的状态。

至此！我们就看到了影子DOM，和其在页面当中的样式！

可以看出所谓的影子DOM也是由普普通通的div组合而成。其作用也是非常明显的，当我们写一个video标签，它就自动帮我们生成了播放／暂停／进度条／全屏／下载等 常用的控件，极大的方便了我们的开发。（感觉它的存在有点js封装的意思）

接下来：我们仔细去看看shadow-DOM的结构

一个宿主标签(这里就是video)包裹 #shadow-root 在shadow-root下面寄宿着许多div。 每当我们我们在页面当中创建一个宿主标签，就可以生产连带产生许多寄宿的div。极其方便！

2、怎么去渲染影子DOM的div的样式？

貌似一般默认的样式，都是那么的不受待见！所以，我们需要能修改默认的样式！
加 id?class?标签选择器? 这些貌似都没用！因为人家没有给你加这些。这时候我们要用到(Pseudo Selector)伪类选着器！还记得前面说过的 几乎每个div都带有一个pseudo的属性。此时，我只需要这样：

video::-webkit-media-controls-panel{
    background-color: red;
}

说到这里，我们都是在跟默认的shadow-DOM玩！如何自己创建一个带有shadow-DOM的前端组建呢？并且自定义样式呢？
我们下文再叙！