想了解Shadow DOM？看这里。

我们都知道像前端MVVC框架vue这些都有组件（component）的概念，饿了么团队的Element在vue的基础上实现了一系列的组件，便于前端开发人员快速开发。
其实我们常用的input、video、audio等这些元素，其实也是以组件的形式存在的，即HTML Web Component，这些都是得益于Shadow DOM（影子DOM）才能实现。

1、Shadow DOM的介绍

以chrome浏览器为例，f12显示控制台，勾选show user agent shadow dom，然后观察一个video元素的呈现，如下图。

video显示

video元素

很明显，

1.1 Shadow DOM概念

Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似

image.png

• shadow-root：Shadow DOM的根节点；
• shadow-tree：Shadow DOM包含的子节点树结构；
• shadow-host：Shadow DOM的容器元素，如：

1.2 深入解析默认的Shadow DOM

以input为例来分析如何去更改相关样式，初始呈现如下图所示：

呈现

布局

我们可以选中shadow-root的第一个div（input占位符的dom），我们注意到placeholder有个伪类pseudo=-webkit-input-placeholder，再查看对应的浏览器默认样式，所以我们可以通过伪类来修改input框的样式。

input::-webkit-input-placeholder {
    color: red;
}

修改样式后呈现

2、自定义Shadow DOM

可以通过element.createShadowRoot()来创建目标容器（shadow-host）对应的shadow-root。
（1）定义简单的Shadow DOM

image.png

    
    
    



    
这是不支持shadow-dom的标题~

• 有些浏览器不支持自定义shadow-dom 所以为了用户体验 做一下处理，如上所示；
• shadow-dom 和 主dom的样式互不影响。

（2）利用template标签来实现的Shadow DOM

image.png

    
    
    



    
I am title
    
I am subtitle

• 主dom可以修改shadow-host的样式；
• 在shadow-dom中用:host选择器表示shadow-host；
• 在shadow-dom中用::content选择器表示在template标签中用到的，只能通过该选择器来操作其后代元素（即通过select来选中的元素，该元素既受主dom样式影响也受template里的style声明的样式::content影响）。；
• 要更改shadow-root里面元素的样式，可以直接在template标签内添加style标签像平时写样式一样即可。（content里面指代的元素样式要用::content更改）；
• shadow-dom 和 主dom的样式互不影响；

注意：这里面涉及的的select属性指向的外部shadow-host里面的元素只会出现一次，重复指定是没有效果的，select属性值为空时则引用shadow-host里面的所有元素。

（3）shadow-dom的事件说明（示例代码同上）

image.png

shadow-DOM的事件全部绑定到了宿主对象上面。避免破坏主DOM的事件。
至于content里面的内容，因为他在文档中有真实的DOM节点。所以没有没有重定向到宿主上面。
也可以在shadow-root里面的节点绑定事件，能正常触发，同时会冒泡的事件也会正常向上传递。