什么是Shadow DOM？和普通DOM树有什么区别？
- web component做到真正的组件化
- 原生规范，无需框架
- 天然与用户隔离，真正意义上的CSS scope
- 比如常用的video标签，我们通常只能在DOM结构中看到一个video标签，但在设置中选择显示Shadow DOM的时候，能看到它真正的结构
// 手动实现一个shadow DOM
<body><script>customElements.define("my-shadow-dom",class extends HTMLElement {connectedCallback() {const shadow = this.attachShadow({ mode: "open" });shadow.innerHTML = "this is my shadow DOM！";}});</script><my-shadow-dom></my-shadow-dom></body>
