# Web Components 全攬

時間 2019-11-05

標籤 web components 欄目 HTML 简体版

原文原文鏈接

Web Components 全攬

Web Components技術能夠把一組相關的HTML、JS代碼和CSS風格打包成爲一個自包含的組件，只要使用你們熟悉的標籤便可引入此組件。Web Components技術包括：html

Custom Element
Shadow DOM
Template
HTML Import

四個分離而又互相關的四個構造塊。其中核心的即便是Custom Element、Shadow DOM，順便會講到而Template是一個支持技術。
HTML Import曾經被Chrome加入可是隨後和V0一塊兒被廢棄。這裏也不會討論它。git

Custom Element 定製元素。

定製元素能夠在原生元素外建立定製元素。定製元素是Web組件的一個基本構成塊。能夠在一個js文件內包含Custom Element須要的所有要素，包括HTML模板、CSS Style和ES6類。並使用一個HTML文件，引用此js文件從而可使用定製元素。github

假設咱們建立Spin Button，定製元素標籤爲:web

<spin-button value=「100」 step="10" min="50" max="150"></spin-button>

咱們首先實現此定製元素，可是爲了簡單起見，晚一點纔看它的屬性。此定製元素內部有一個加號按鈕，一個減號按鈕，一個span顯示當前值。那麼只須要把這個HTML模板組織、風格和代碼組合在一個文件內：瀏覽器

var template = `
    <button inc>+</button><span>1</span><button dec>-</button>
    <style>
        span{color:red;}
        *{font-size:2rem;}
    </style>
`
class SpinButton extends HTMLElement{
    connectedCallback(){
        this.innerHTML = template
        var b1 = this.querySelector('[inc]')
        var b2 = this.querySelector('[dec]')
        var s = this.querySelector('span')
        var i = 1
        b1.onclick = function(){
            s.innerHTML = i++
        }
        b2.onclick = function(){
            s.innerHTML = i--
        }
    }
}
customElements.define('spin-button',SpinButton)

而且建立一個index.html文件加載此文件，便可使用新的定製元素spin-button了：app

<script src="./spin.js"></script>
<spin-button></spin-button>

你能夠看到執行在瀏覽器內的界面上的兩個按鈕和一個span。建立一個定製元素有幾個要點：函數

新的JS定製類須要繼承於類HTMLElement
回調connectedCallback提供一個生命週期事件，當定製元素成功掛接到DOM後，會調用此回調，能夠在此回調代碼內加入本身的定製內容
代碼中的this，指向了此定製元素自己，所以能夠經過this.innerHTML設置本定製元素的內部DOM

這樣，咱們建立了一個獨特的定製元素，這個元素不在原生的瀏覽器標籤內。網站

定製元素就是這樣建立了，而且對於使用者來講，只要經過熟悉的元素標籤，便可引用一組帶有定製風格、操做和界面的組件了。this

可是此時的定製元素有一個問題，就是它內部定義的風格，不只僅會影響內部的元素，也會泄露到外部致使文檔也被影響，從而引起咱們不但願的邊際效應。好比在index.html內若是在文件尾部加入這樣的文本：google

<span>black</span>

你會發現black文本不是默認的顏色，而是紅色，這樣紅色來自於定製元素內部的風格定義代碼。若是但願隔離組件內的風格定義，那麼可使用Shaddow DOM技術。此主題會在下一部份內介紹。

Shadow DOM

Web建站使用組件技術有比較長的歷史了，這個技術一直以來都有一個挑戰，就是如何讓一個頁面可使用第三方控件，可是不會被此組件使用的CSS風格所影響。解決方案是CSS能夠局部化。想要組件內部的風格不會影響到外部，辦法就是使用Shadow DOM。Shadow DOM建立了一個隔離區，在這個隔離區內的DOM是獨立的，這意味着：

內部DOM Tree不會被外部文檔訪問到
也不會被外部的風格設置影響
內部的風格也不會影響到外部文檔

咱們拿前一個案例代碼作實驗，看看若是使用這個技術特性。

使用Shadow DOM的關鍵，是首先建立一個Shadow Node，整個組件內部的HTML片斷都插入到此節點內，而不是直接使用組件的innerHTML。咱們能夠在組件對象的構造器內執行此代碼：

class SpinButton extends HTMLElement{
    constructor(){
        super()
        var shadow = this.attachShadow({mode:'open'})
        var t = document.createElement('template')
        t.innerHTML = template
        shadow.appendChild(t.content.cloneNode(true))
    }
}

執行後，你會發現span的風格再也不影響組件以外的標籤。看起來仍是很簡單的，只要把你原本須要構造的HTML內部DOM插入到shadow節點內便可。

定製元素的屬性

元素的屬性被稱爲Attribute，JS對象內的屬性被稱爲Property。代碼慣例上每個Attribute都會有JS對象的一個Property對應。爲了方便，咱們但願添加的Attribute能夠和JS內的Property同步。就是說，若是有人經過HTML DOM API修改了Attribute，那麼我但願對於的JS屬性會被同步修改；反之亦然，有人修改了Property，那麼這個修改能夠會同步修改到對應的Attribute。

咱們以spin-button的value屬性爲例。定義一個普通的Property的方法是經過get/set關鍵字，好比定義value：

get value(){}
 set value(newValue){}

隨後就可使用object.value訪問此屬性值，或者經過object.value = newValue爲屬性設置新值。能夠在兩個函數內經過代碼設置和Attribute同步：

get value(){
    return this.getAttribute('value') || 1
}
set value(v){
    this.setAttribute('value',v)
}

這樣代碼內經過對屬性value的訪問，最後都會致使對Attribute的訪問。若是有代碼對Attribute訪問，如何修改Attribute的同時同步更新Property呢。這就須要利用HTMLElement提供的生命週期方法了：

static get observedAttributes() {
  return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
  switch (name) {
    case 'value':
      
      break;
  }
}

方法observedAttributes聽過返回值聲明須要觀察的屬性，這樣就能夠在指定屬性清單發生更新時經過另外一個生命週期方法attributeChangedCallback,通知代碼變化的狀況。作響應的同步處理。整合後的代碼以下：

var template = `
    <button inc>+</button><span>1</span><button dec>-</button>
    <style>
        span{color:red;}
        *{font-size:2rem;}
    </style>
`
class SpinButton extends HTMLElement{
    constructor(){
        super()
        var shadow = this.attachShadow({mode:'open'})
        var t = document.createElement('template')
        t.innerHTML = template
        shadow.appendChild(t.content.cloneNode(true))
        var b1 = shadow.querySelector('[inc]')
        var b2 = shadow.querySelector('[dec]')
        this.s = shadow.querySelector('span')
        var i = 1
        var that = this
        b1.onclick = function(){
            that.s.innerHTML = ++that.value 
        }
        b2.onclick = function(){
            that.s.innerHTML = -- that.value 
        }
    }
    static get observedAttributes() {
      return ['value'];
    }
    attributeChangedCallback(name, oldValue, newValue) {
      switch (name) {
        case 'value':
          this.s.innerHTML = newValue
          break;
      }
    }
    get value(){
        return this.getAttribute('value') || 1
    }
    set value(v){
        this.setAttribute('value',v)
    }
}
customElements.define('spin-button',SpinButton)