shadow dom

shadow dom是什么

shadow dom是dom中的一块影子区域，它和主dom相互独立，互不影响，这很好的保证了组件的私有性和独立性。

核心组件

• 宿主host：被shadow dom附加的dom节点，可以是自定义web组件也可以是普通的dom节点。
• 结构树tree：shadow dom的结构树
• 根节点root：shadow dom的根节点root
• 影子边界boundary：Shadow DOM与外部DOM的分隔线

attachShadow添加影子

在宿主元素上附加shadow root，并设置访问模式open或者close，设置为open时可通过shadow root访问shadow dom。

在普通dom节点中附加shadow dom

const hostDom = document.getElementById("ShadowHost")

const shadowRoot = hostDom.attachShadow({mode: 'open'})
document.body.appendChild(hostDom)
// 向 Shadow DOM中添加内容
shadowRoot.innerHTML = `
  <style>
    h1 { color: red; }
  </style>
  <h1>I'm shadow dom!</h1>
`

自定义web元素中附加shadow dom

customElements.define('my-shadow-element', class extends HTMLElement {
    constructor() {
      super();
      const ShadowHostContent = document.getElementById('ShadowHostContent');
     const shadowRoot = this.attachShadow({mode: 'open'})
    
if(ShadowHostContent && ShadowHostContent.content) {
shadowRoot.appendChild(ShadowHostContent.content.cloneNode(true))
}	else {
shadowRoot.innerHtml = `
  <style>
    h1 { color: red; }
  </style>
  <h1>I'm shadow dom!</h1>
`
}
    }
  })