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);