Shadow DOM

Shadow DOM 是 WebComponent 中的一项重要属性，可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可以让代码更加干净、整洁。

Shadow DOM 可以将隐藏的 DOM 树附加到常规的 DOM 树中，它以 shadow root节点为起始根节点，在这个节点的下方，可以是任意元素，和普通的 DOM 元素一样

术语

• Shadow host: 一个常规的 DOM 节点， Shadow DOM 会被附加到这个节点上。
• Shadow tree: Shadow DOM 内部的 DOM 树
• Shadow boundary: Shadow DOM 结束的地方，也是常规 DOM 开始的地方
• Shadow root: Shadow tree的根节点。

使用方式

使用 Element.attachShadow()方法将一个 shadow root 附加到任何一个元素上。接受一个配置对象作为参数，该对象有一个 mode属性，值为open或者closed

let shadow = elementRef.attachShadow({ mode: "open" });
let shadow = elementRef.attachShadow({ mode: "closed" });

open 表示可以通过页面内的 JavaScript方法来获取 Shadow DOM

let myShadowDOM = myCunstomElem.shadowRoot;