Shadow DOM

前言：
        中秋佳节，在此祝愿各位开发者中秋节安康。即使单身一人，也要记得，远在他方有一个对你倍感思念的人。
        时光匆匆，回想起刚入这行的时候，还是一个连标签嵌套都搞不大明白的小白。今天偶然有机会看到一篇博客，里面讨论着 Shadow Dom 的一些相关。

什么是 Shadow DOM?

        有关这个问题呢，先来提问一下，之前各位开发者使用 video标签 的时候，有没有考虑过这样一个问题呢？ “为什么在我使用 video 标签的时候，他内部有着“进度条”，“播放按钮”，亦或是“放大缩小框”这种默认属性”。其真实的 dom结构 得益于 shadow dom。

Shadow DOM — 被隐藏起来的 DOM元素

        Shadow DOM 是指浏览器的一种能力，它允许在文档（document）渲染的时候，插入一颗 DOM元素子树，但是这课子树，并不在DOM树中，下面来看一个演示。

<input id = "slide" type = "range">

   将这段代码运行在 webkit内核 的浏览器中，它是这样显示的：

        其结构是一个简单的滑槽，还有一个滑块儿可以沿着滑槽滑动。但实际上，我们并不能从浏览器的开发者工具上看到这部分结构，chrome 浏览器貌似是可以查看到这部分 “被藏起来的” 结构的。

        web开发者们设定了一个边界，界定了哪些是你可以访问的，哪些实现细节是你访问不到的。然而，浏览器本身却可以随意跨越这个边界。设置这样一个边界之后，它们就可以在你看不见的地方使用熟悉的 web技术，同样的 HTML元素去创建更多的功能，而不是像你一样要在页面上用 div 和 span来堆叠。

事件的情况

       为了尽可能的保持自然状态， Shadow DOM子树中的事件可以在文档（document）中被监听。比如，你点击一下 audio 元素中的静音按钮，你可以在一个包裹它的 div中监听到这个事件。

<div onclick="alert('who dat?')">
    <audio controls src="test.wav"></audio>
</div>

       但是，如果你要确定事件的来源，会发现它是 audio 元素，而不是他内部的按钮，举个例子，假如你吃了一颗夹心的阿尔卑斯糖，没错，草莓味的，当你尝到夹心层的果酱时，会发觉这该死的甜美，但实际上甜的东西是糖精，而不是所谓的果酱，但是你肉眼可见的就会觉得只是单纯的果酱而已。此处只是举个例子，没有黑的意思 [防 diss]

<div onclick="alert('fired by:' + event.target)">
    <audio controls src="test.wav"></audio>
</div>

       为什么这样？因为当事件穿过 Shadown DOM 边界的时候，会被重新设定target，以避免暴露 Shadow DOM 子树内部结构。用这种方式，你可以监听到从 Shadow DOM 中产生的事件，而实现者也可以继续隐藏细节。

Shadow DOM 的 兼容性

从下图中，我们可以看到 Shadow DOM 的兼容性问题，这个网站在我初学前端的时候基本没有用过。但是工作中难免会遇到一些 兼容性的需求啊，要求样式兼容浏览器版本什么的，名字叫做 “Can I use”, 附上一个链接，希望对你有所帮助。
Can I use 传送门开启

本文针对不了解 Shadow DOM 的开发者们，做简要介绍，后期再更一些细节吧，当然也可以直接选择百度别的博客学习。北京时间凌晨 2点50，中秋佳节的你，还在加班吗。
今夜月明人尽望，不知秋思落谁家。