1.是什么？
简言之：影子Dom，即Dom中的Dom。一般浏览器不会显示出来。对于video、audio、input、textarea等标签，浏览器右键/检查/设置/勾选show user agent shadow DOM 可以看到平时看不到的dom节点。
这里，有一些 Shadow DOM 特有的术语需要我们了解：
- Shadow host：一个常规 DOM节点，Shadow DOM 会被附加到这个节点上。
- Shadow tree：Shadow DOM内部的DOM树。
- Shadow boundary：Shadow DOM结束的地方，也是常规 DOM开始的地方。
- Shadow root: Shadow tree的根节点。
2. 作用
Shadow DOM 内部的元素始终不会影响到它外部的元素，里面写的样式也不影响外面。为封装提供了便利
3.使用
- 示例中有两个div的className都是haha，一个在普通dom中，一个在shadowDom中。
- 可以看到两个style标签下的haha样式互不影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.haha {
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner"></div>
<div class="haha">哈哈哈哈</div>
</div>
</body>
<script>
const inner = document.querySelector('.inner');
const innerShadow = inner.attachShadow({mode: 'open'});
//当mode为open时，可使用host元素的shadowRoot属性从root外部访问shadow root的元素，即inner.shadowRoot
const div = document.createElement('div');
div.innerHTML = "haha";
div.className = 'haha'
const style = document.createElement('style');
style.textContent = `
.haha {
color: #ff0000;
}
`;
innerShadow.appendChild(style)
innerShadow.appendChild(div)
</script>
</html>
