想了解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元素

很明显，<video>标签中有很多的内容，隐藏的shadow-root里面的内容就是以上视频播放器控制组件HTML结构的所在之处。

1.1 Shadow DOM概念

Shadow DOM是HTML的一个规范，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似<video>这样的自定义一级标签，创建这些新标签内容和相关的的API被称为Web Component。

image.png

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shadow-dom</title>
    <style>
        h1 {
            color: #db73ff !important;
        }
    </style>
</head>
<body>
<el-h1>
    <h1>这是不支持shadow-dom的标题~</h1>
</el-h1>
<script>
    if (document.body.createShadowRoot) {

        let host = document.querySelector('el-h1');
        let root = host.createShadowRoot();
        root.innerHTML = '<h1 style="background-color: #2cacff; color: white;">这是支持shadow-dom的标题~</h1>';
    }
</script>

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

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

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shadow-dom</title>
    <style>
        h1, p {
            color: #db73ff !important;
        }
        #host {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="host">
    <h1 class="title">I am title</h1>
    <p class="subtitle">I am subtitle</p>
</div>
<template id="temp">
    <style>
        span {
            color: red;
        }
        ::content * {
            background-color: #60d9ff;
        }
        :host {
            border: 2px solid #14ff1a;
        }
    </style>
    <p onclick="alert('hello~');" pseudo="test">template - 点我吧~~</p>
    <span>I'm the span tag of template</span>
    <!-- 绑定#host所有内容 -->
    <!--<content></content>-->

    <!-- 绑定#host p的内容 -->
    <content select=".subtitle"></content>
    <!-- 绑定#host h1的内容 -->
    <content select="h1"></content>
</template>
<script>
    var host = document.querySelector('#host');
    var root = host.createShadowRoot();
    var temp = document.querySelector('#temp');
    var clone = document.importNode(temp.content, true);

    root.appendChild(clone);
    document.addEventListener('click', function(e) {

        console.log(e.target.innerHTML + ' click!');
    });
</script>

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

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

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

image.png

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

想了解Shadow DOM？看这里。