神秘的 shadow-dom 浅析

说到 shadow-dom 可能很多人会很陌生。但是其实我们肯定碰到过，本文主要想简单介绍下 shadow-dom。下面直接进入正文。w3c 上的一个  例子为例，我们仅仅是填写了一个空白的标签，再加上 src 属性里填上视频地址，就可以播放视频了：

我们仅仅填写了一行代码，却拥有比这行代码更多的功能，譬如暂停，播放，音量控制，全屏按钮，进度条等等。

这些功能具体的 DOM 实现，其实都在 shadow-dom 中：

浏览器的开发者们意识到作为前端开发者，引用一个  标签的时候，每次还要写入一大堆 DOM 去控制控件的表现和行为，既不简洁也很困难。所以他们界定了这样一个界限，界定了哪些是你可以访问的，哪些实现细节是访问不到的。

那些不希望我们访问到的细节，则封装在了 shadow-dom 中。然而，浏览器本身却可以随意跨越这个边界。设置这样一个边界之后，浏览器的开发者们就可以在我们看不见的地方使用熟悉的web技术、同样的HTML元素去创建更多的功能，而不是像我们一样要在页面上用div和span来堆砌这些元素。

Introduction to Shadow DOM

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