我们都知道像前端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）对应deshadow-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里面的节点绑定事件，能正常触发，同时会冒泡的事件也会正常向上传递。
网友评论