Shadow DOM简介

2017年07月08日Web前端

你可能只听过virtual dom,没听过Shadow DOM,但是你其实已经在使用他们了。

一、简介

Shadow DOM,可以理解为影子DOM,既然是DOM,那么我们可以以DOM的概念先去理解他。再加上shadow,我们便可以把他理解为隐藏的DOM。

尽管我们还在兼容低版本的IE,但是这不会阻挡我们去学习新的技术。比如在HTML5中新增的有关媒体的两个元素video和media元素,在使用他们的时候,我们有没有想过,只要写这么一个元素,却可以显示个播放器,而且快进、慢进等功能都有。比如一个video标签,在Element中,我们看到的是这样的:

很简介,一个video标签下存放了一个视频路径的source标签。 使用chrome35以上的版本,在f12得控制台设置中,我们勾选打开Shadow DOM。

然后,在进入Element,你会发现一片新天地。

浏览器默认不显示他们,是表明这一部分对于页面的其他部分来说是不可用的,也就是说,我们自己写的CSS或者是JS是不可能影响到他的。

用图表示的话:

Document:

正常的DOM文档。

Shadow host:

一个Shadow元素必定要有个宿主元素,就像video元素。

Shadow root:

Shadow DOM的根节点。

Contents:

Shadow 中各个DOM的实现。 所以说,Shadow DOM 就是一个封装的坏境,可以用来给开发者开发相对独立,互不影响的功能。简而言之,Shadow DOM 是一个 HTML 的新规范,他允许开发者封装自己的 HTML 标签、CSS 样式以及 JavaScript 代码。总的来说,这些新标签和相关的 API 被称为 Web Components。

二、作用

现代web工程项目都不是一个人来开发的,都是通过团队合作完成的。既然是多人完成的,那么久难免会出现相互影响的问题。比如A开发了一个功能,而B一不小心覆盖了A写的样式(很常见)或者覆盖了A的JS变量(模块化的话,会有效解决这个问题,引三方库时还是有点麻烦),那么我们就会付出不必要的查询问题和解决问题的时间。而Shadow DOM就可以很好的处理这个问题,而Web Components标准正是很好的实现(Shadow DOM只是Web Component中的一部分),更好的实现web的组件化。

三、兼容性

有新的草案是不错的,可是兼容性问题一直是很大的关注点。

早在2013年的时候有篇文章就介绍了Shadow DOM:Shadow DOM: Introduction

那么我们现在来看下Shadow DOM的兼容性吧。分别是Shadow DOM v0 和 Shadow DOM v1 的兼容性。依然不是一个主流属性,看来这道路还是很漫长啊。

注:Shadow DOM v0和 v1也是有差别的,具体可访问What's New in Shadow DOM v1