web component使用(二)

web components中可以将html、css和行为封装在一起，就可以与页面上的其他功能分离开来，使代码更加干净，这些都是Shadow DOM来完成的。

定义

Shadow DOM将隐藏的DOM树添加到常规的DOM树中，它以shadow root为根结点，在根结点的下方，可以是任意的元素，和普通的DOM元素一样。

图片来源于MDN

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

操作Shadow DOM和常规DOM一样，比如添加子元素、修改属性以及设置样式，Shadow DOM内部的样式修改不会影响外面的样式，这有利于封装。

Shadow DOM 使用

Element.attachShadow()

上面的代码将一个shadow root附加到一个元素上，它带有一个参数mode, 只为close或open

var shadow = elementRef.attachShadow({mode: 'open'});

open表示可以通过页面内的javascript代码来访问；close则表示不能访问，取到的值为null。

下面是一个示例，在shado root上添加了一个字元素

class MyElement extends HTMLElement {
  constructor() {
    super();
    const showRoot = this.attachShadow({mode: 'open'});
    const container = document.createElement('span');
    const text = this.getAttribute('text');
    container.innerHTML = text;
    showRoot.appendChild(container);
  }
}
customElements.define('my-element', MyElement);